0

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

两边都是浮动的（一个左边，另一个右边），但我必须在我的文章中包含一个自动生成的表格，其中包含一些明确的内容：包括。由于清除，这导致表格出现在侧面下方。

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

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

jsfiddle.net/89kpd/

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

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

jsfiddle.net/89kpd/2/

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

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

4

2 回答 2

0

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

jsFiddle 示例

添加：

#main {
 float:left;   
}​

到你的 CSS

于 2012-08-28T12:33:06.700 回答
0

显然，整个东西需要 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; }
于 2012-08-27T18:59:20.583 回答