Question

我通常使用表格进行布局。但我想尝试在Div中进行布局。这是问题，当我“浮动：左”一个div时，它使随后的div随之漂浮。我试图将“float：none”放到下一个div中，以使它打破一条线，但它不起作用。

以下是我想用表格做的事情：

<hr style="width: 100%;" />
<table>
  <tr>
    <td>
      <div id="divLeftPane">
        ...
      </div>
    </td>
    <td>
      <div id="divCenterPane">
        ...
      </div>
    </td>
    <td>
      <div id="divRightPane">
        ...
      </div>
    </td>
  </tr>
</table>
<hr style="width: 100%;" />

这是我到目前为止使用float尝试div：

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane">
    ...
  </div>
</div>
<hr style="width: 100%;" />

使用div的问题是底部

也浮动到左侧。我尝试将float：none放到最后一个div，HR标签甚至divContainer中。为什么最后一个小时浮动？

Answer 1

这将为您提供所需的效果：

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane" style="float:left; ">
    ...
  </div>
  <div style="clear: left;"></div>
</div>
<hr style="width: 100%;" />

浮动3个div会使它们并排显示，但你会发现divContainer不会占用div标签的高度。使用clear添加div：left基本上撤消了这个。

编辑：当您真实地执行此操作时，请避免使用内联样式。

Answer 2

使用属性

明确：左;

底部元素

。

Answer 3

添加

#divContainer {
    overflow: hidden;
}

将在没有额外div的情况下完成此任务

如何强迫div不受欢迎

3 个答案: