如何强制div浮动

发布于 2024-08-18 11:42:52 字数 1148 浏览 4 评论 0原文

我通常使用表格来进行布局。但我想尝试一下 Div 中的布局。问题是，当我“浮动：向左”一个 div 时，它会使后续的 div 随之浮动。我尝试将“float：none”放入下一个div以使其换行，但它不起作用。

这是我想要使用 table 执行的操作：

<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 的问题是底部

is also being floated to the left. I tried putting float: none to the last div, the HR tag and even the divContainer. Why does the last hr float?

原文

I am usually using table to do layouting. But I would like to try out the layouting in Div. Here is the problem, When I "float: left" a div, it makes the succeeding div to float with it. I tried to put "float: none" to the next div to make it break a line but it does not work.

Here is what I want to do using table:

<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%;" />

Here is what I have so far tried with div using float:

<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%;" />

The problem with the use of div is the bottom

is also being floated to the left. I tried putting float: none to the last div, the HR tag and even the divContainer. Why does the last hr float?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兮颜 2024-08-25 11:42:52

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

<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:left的div基本上可以消除这个问题。

编辑：当你真正这样做时，避免内联样式。

This will give you the desired effect:

<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%;" />

Floating the 3 divs left will make them appear side by side, but you'll notice that divContainer does not take the height of the div tags inside it. Adding the div with clear:left basically undoes this.

edit: Avoid inline styles when you do this for real.

回复收藏 0 原文