CSS / HTML Div Alignment

如何解决CSS / HTML Div Alignment

| 我正在尝试将div对齐到另一个div的底部（父/子），但是我似乎无法弄清楚。 我想做的是对齐具有日期以及“气泡”底部的编辑/删除链接的文本。 这是我正在使用的代码：

<div class=\"bubble_wrap\">
    <div class=\"bubble_image\"><img src=\"http://sitefrost.com/images/avatars/Avatar-3-Admin.gif\"></div>
    <div class=\"bubble_content\">
            Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam pellentesque auctor imperdiet. Morbi mollis nulla et odio scelerisque rutrum. Fusce sem justo,porta vel lacinia quis,convallis et elit. Sed id velit ut magna lobortis placerat at ut lectus. Aenean vel velit sem.
        <div class=\"date\">June 9th,2011 at 12:01 pm &ndash; <a href=\"#\">Edit</a>&nbsp;&nbsp;<a href=\"#\">Delete</a></div>
    </div>
</div>

.bubble_wrap {
    overflow: auto;   
    margin-bottom: 10px;
}
.bubble_wrap .bubble_image {
    float: left;
    margin-right: 0px;
    margin-bottom:3px;
}
.bubble_wrap .bubble_image img {
    max-width: 85px;
    max-height: 85px;
}
.bubble_wrap .bubble_content {
    width: 565px;
    min-height:60px;
    background: #fbfcfe;
    background: -moz-linear-gradient(top,#fbfcfe 0%,#f3f4f6 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fbfcfe),color-stop(100%,#f3f4f6));
    background: -webkit-linear-gradient(top,#f3f4f6 100%);
    background: -o-linear-gradient(top,#f3f4f6 100%);
    background: -ms-linear-gradient(top,#f3f4f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#fbfcfe\',endColorstr=\'#f3f4f6\',GradientType=0 );
    background: linear-gradient(top,#f3f4f6 100%);
    border:1px solid #CFD0D2;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    float: right;
    padding:10px;
    position:relative;
}
.bubble_wrap.bubble_right .bubble_image {
    float: right;
    margin-right: 0px;
    margin-left: 0px;  
}
.bubble_wrap.bubble_right .bubble_content {
     float: left;   
}
.bubble_wrap.bubble_right .right {
    text-align:right;
}
.bubble_wrap .date {
    color: #888;
    font-size:11px;
    display:block;
}
.bubble_wrap .date a:link,a:visited,a:hover {
    text-decoration:none;
    font-weight:bold;
    color:#888;
}

    

解决方法

        将包含div的位置设置为相对，将包含日期的内部div的位置设置为绝对，将其底部位置设为0。然后，确保包含div的底部填充足够使内部div始终显示而不覆盖以下内容：在它之前。     ,        您可以使用绝对位置进行此操作

.bubble_content{position:relative}
.date{position:absolute; bottom:0; left:0;}

或者您也可以稍微更改html结构，使其看起来像这样：

<div class=\"bubble_wrap\">
<div class=\"bubble_image\"><img src=\"http://sitefrost.com/images/avatars/Avatar-3-Admin.gif\"></div>
<div class=\"bubble_content\">
        Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam pellentesque auctor imperdiet. Morbi mollis nulla et odio scelerisque rutrum. Fusce sem justo,porta vel lacinia quis,convallis et elit. Sed id velit ut magna lobortis placerat at ut lectus. Aenean vel velit sem.
    <div class=\"date\">June 9th,2011 at 12:01 pm &ndash; <a href=\"#\">Edit</a>&nbsp;&nbsp;<a href=\"#\">Delete</a></div>
</div>

并在.bubble_content的底部设置填充 两种方法都很干净。且易于执行。     ,        在查看您的代码时，.bubble_wrap类分配了一个空白边距，请尝试将其更改为0并将其分配给.date类以进行填充。我还建议您是否要在日期和文本之间留出更多空间，以便为.date类分配页边距。

.bubble_wrap {
    overflow: auto;   
    margin-bottom:0;
}
.date {
margin-top:10px;
margin-bottom:10;
}

我希望这有帮助。