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

Question

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

<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，但它不起作用。

Answer 1

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

正如您所尝试的那样，您可以通过使用 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: left 和 width