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 - Axios onUploadProgress 在我的机器上只触发一次

javascript - 动态添加单选按钮

html - Iframe 在 IE9 上没有填满整个 div

html - 向下滚动创建表格

javascript - 是否有足够智能的 jquery 上下文菜单插件来处理窗口边框?

javascript - Ascensor.js 不起作用?

javascript - 为什么我的 Swiper slider 无法在 Django 中工作?

html - 将文本/元素定位在 HTML 文档的右侧

php - 如何在 php 代码中使用动画 css 更改表单

html - 创建 CSS 形状时出现问题