Question

我在div容器中有并排表，然后是我想在表下显示的另一个div元素。在任何时候，表可能具有比彼此更多的行。如何让“Logs”div始终显示在行数最多的表格下方？

<div id="table_container">
  <table border="1" class="table_tpr">
    <tr>
      <td width="10%">1</td>
      <td width="50%">12345678912345678912345679821345678941536321</td>
      <td width="20%">2</td>
    </tr>
    <tr>
      <td width="10%">1</td>
      <td width="50%">12345678912345678912345679821345678941536321</td>
      <td width="20%">2</td>
    </tr>
    <tr>
      <td width="10%">1</td>
      <td width="50%">12345678912345678912345679821345678941536321</td>
      <td width="20%">2</td>
    </tr>
  </table>
  <table border="1" class="table_loa">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
</div>
<br />
<div class="maintitle">Logs</div>

Answer 1

您必须清除浮动元素。

参见工作示例：http://jsfiddle.net/carloscalla/Tc2wA/12/

我添加了应该清除浮动元素的类clearfix，并且在任何浏览器中都不会出现问题：

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }
.clearfix {
  zoom: 1; }

然后你将这个课提供给#table_container元素：

<div id="table_container" class="clearfix">

Answer 2

你可以简单地为你的maintitle类添加一些css：

.maintitle{
    clear:both;
}

这将确保日志始终显示在表格下方。

这是您更新过的小提琴：http://jsfiddle.net/bmartinelle/Tc2wA/11/

CSS显示div下表

2 个答案: