在div中定位3个div

Question

我正面临着css问题。基本上我有主要的div标签和3个div类，名为pic_con，body_con和msg_con。 div msg_con长度和高度取决于它的文本。如果文本太长，它应该有多于一行显示all。查看图片。第一个用小文本，第二个用大文本..div msg_con有minimem宽度和最大宽度。 我想将这个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设置为左，但这不起作用。

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

Answer 2

使用display:table样式。

.msg_con {
   display : table
}

这使得.msg_con的行为类似于表格元素，它会根据其内容的长度（高度和宽度）重新调整大小。