css - 如何正确清除此设计?

标签 css css-float

我有一个网站使用 float /清除方法进行 3 列设计(2 个旁白 - 左和右 - 和主要文章)。

两边都是 float 的(一左一右),但我必须在我的文章中包含一个自动生成的表单,其中包含一些 clear:both included。 由于清晰,这导致表格出现在旁边。

我错过了什么吗?在这种情况下我能做什么?好久没做网站了,一直卡在这里。

这是我的问题的极简代码:

jsfiddle.net/89kpd/

我希望表单内容位于“我的表单”标题下方。

我能想到的是在表单中使用 display:inline-block 代替:

jsfiddle.net/89kpd/2/

但这需要我更改内部组件,我不希望这样做。

但也许有更好的方法在一开始就设计我的网站,而不是使用 float/clear 方法。我想我应该在这里做点什么。 我不关心 IE6 兼容性。对于 IE7,我们会看到,但可能不重要...

最佳答案

尝试将#main div float 到左侧,使其 float 在其他 float div 之间。

jsFiddle example

添加:

#main {
 float:left;   
}​

到你的 CSS

关于css - 如何正确清除此设计?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12147726/

相关文章:

css - 在具有动态宽度的居中 div 内具有 100% 宽度的 Div?

html - 如何在两列中显示无序列表?

html - 为什么我的主要内容 div 没有扩展以适应其中的子 div?

html - CSS float : left causing unnecessary whitespace with varying height

css - float 内部 Div 影响父级的高度

css - IE7 cleafix 不工作

css - 使用 CSS 仅过渡一个 div

html - 容器内左侧和右侧的简单 Html

css - 偏移框,正确的方法

html - 表和 float