javascript - 在一个div中定位3个div

标签 javascript css html

我正面临 css 问题。基本上我有主要的 div 标签和 3 个 div 类,名为 pic_con、body_con 和 msg_con。 div msg_con 的长度和高度取决于它的文本。如果文本太长,它应该不止一行来显示所有内容。看图片。第一个是小文本,第二个是大文本..div msg_con 有最小宽度和最大宽度。 我想将这 3 个 div 定位为图片中的样子。 enter image description here

<div id="apDiv1">
    <div id="div_id_1" class="msg_w_1">
        <div class="pic_con">
            <div class="body_con">small icon"</div>
            <div class="msg_con">hi</div>
        </div>
        <div id="div_id_2" class="msg_w_1">
            <div class="pic_con">
                <div class="body_con">small icon"</div>
                <div class="msg_con">hey this is multiline text</div>
            </div>
        </div>

我的CSS

.pic_con {
    float:left;
    background-color:#096;
}
.back_con {
    float:left;
    background-color:#3CC;
    border:5px solid red;
    width:150;
}
.body_con {
    /*float:left;*/
    margin:0 auto 0 auto;
    background-color:#C39;
    border:5px solid red;
}

我将 flote 设置为 left,但它不起作用。

最佳答案

据我了解,您想将它们一个接一个地对齐。

正如您所尝试的那样,您可以通过使用 float: left 来管理它。此外,您应该将父 div 设置为 clear: both

我看到的另一件事是您没有关闭 pic-con DIV。试试这个:

HTML

<div id="apDiv1">

<div id="div_id_1" class="msg_w_1">
    <div class="pic_con">pic</div>
    <div class="body_con">small icon</div>
    <div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
    <div class="pic_con"></div>
    <div class="body_con">small icon"</div>
    <div class="msg_con"> hey this is multiline text</div>
</div>
</div>

CSS

.msg_w_1 {
    clear: both;
}

.msg_w_1 div {
    float: left;
}

编辑:我在发帖时没有看到包含 CSS 的更新帖子。在尝试此操作之前,请尝试从您的 CSS 类中删除 float: leftwidth

关于javascript - 在一个div中定位3个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22647175/

相关文章:

javascript - 如何在终端中比较 Chrome 和 NodeJS 之间的 V8 Javascript 引擎版本?

javascript - 谷歌自动完成功能在framework7中不起作用

html - 列表项 CSS 样式

css - Bootstrap,div span4 不会保留在 row-fluid 中

css - 拉伸(stretch)/收缩父 div 以适应内容的宽度

javascript - 如何删除表格中每个 td 标签的第一个字符,然后使用 Google Chart API 和 Javascript 显示它

css - 制作一个空的 DIV 高度和其容器的宽度

jquery - 如何将列表项中的类切换为显示 :none, display:block

html - 如何使用 flexbox 使固定宽度的侧边栏与灵活的内容对齐

javascript - Angular 6 - 表单 - 选择选项未正确更新