如何强迫div不受欢迎

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基本上撤消了这个.

编辑:当您真实地执行此操作时,请避免使用内联样式.