Question

这是我的设置：

我有一个评论容器div。在这个div中，我还有三个div。两个是浮左，一个是浮右。

这3个div在它们周围有圆角边框。我认为很容易分辨出上图中的哪些是向左浮动并向右浮动。

在三个浮动的div之后，有一个看不见的“清晰”div，

<div style="clear:both; border:none;"></div>

我的问题是，我似乎无法找到一种方法让“一些测试信息”div一直滑到评论的底部（这样它的底部就在“清除”的顶部正上方格。

Answer 1

Float并不像那样工作;元素将始终浮动到顶部，如[insert simile here]。

您可能不得不放弃float方法并使用absolute定位，类似于

bottom:0;
left:0;

如果你这样做，你还需要设置一个top属性，所以它不会叠加在统计数据部分之上。

Answer 2

在容器div中添加注释div并在此容器中添加"some test info" div，这使得它成为一种简单的css样式，它将始终在注释div下面编辑div

<head>
  <style type="text/css">
    div.comment_and_edit_container {
      float:left;
    }
    div.comment, div.edit {
      display:block;
    }
    div.comment {
      min-width:500px;
    }
  </style>
</head>
<div class="comment_and_edit_container">
  <div class="comment"></div>
  <div class="edit"></div>
</div>

浮动右元素对齐底部CSS？

2 个答案: