Question

我有一个网站使用浮动/清除方法进行3列设计（2个左侧 - 左侧和右侧 - 以及主要文章）。

两个都是浮动的（一个是左边，另一个是右边），但是我必须在我的文章中自动生成一个有一些明确的表格：两个都包括在内。这导致形式出现在旁边，因为清楚。

我错过了什么吗？在这种情况下我该怎么办？我做网站已经有一段时间了，我被困在这里。

以下是我的问题的极简主义代码：http://jsfiddle.net/89kpd/
我希望表单内容位于“我的表单”标题下方。

我能想到的是在表单中使用display：inline-block：http://jsfiddle.net/89kpd/2/ 但它需要我改变内部组件，我不愿意这样做。

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

Answer 1

显然，整个事情需要500px宽。试试这个HTML：

<div id="blue">
    <aside id="black"></aside>
    <article id="main">
        <h2 class="center">My Form:</h2>
        <div class="row">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" />
        </div>
        <div class="row">
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" />
        </div>
    </article>
    <aside id="red"></aside>
    <br clear="all" />
</div>
<br clear="all" />

CSS：

#blue{background:blue; width: 500px; height: 600px; color:white;}

#black{float:left; background:black; width: 120px; height: 345px; float: left;}

#red{float:left; background:red; width: 120px; height: 345px; float:right;}

#main{float:left;width:260px;}

label { float:left; width:100px; }

input { float:left; width: 150px; color:black; }

.row { clear: both; }

h2 { font-size:20px; text-align:center; }

Answer 2

尝试将#main div浮动到左侧，使其在其他浮动的div之间浮动。

<强> jsFiddle example

添加：

#main {
 float:left;   
}

到你的CSS

如何正确清除这个设计？

2 个答案: