Question

我尝试有几个小时的自己布局，但我仍然有问题。我想：http://img191.imageshack.us/img191/1243/schemal.png

我希望身体灵活。最大宽度页面900px。我无法应对浮动和清除。

感谢您的帮助！

Answer 1

稍微重新排列HTML后（将所有侧边栏项目移动到彼此排列 - 一个左，两个，两个等......），我重新创建了这个效果，假设您希望身体包含浮动的项目，并在下面散布，with this jsfiddle。

如果这不是您想要的效果，我建议您重新排列HTML以包含三列，如下所示：

<div class="column-left"></div>
<div class="column"></div>
<div class="column-right"></div>

在这些div中，你可以拥有你想要的任何元素，你只需要在这里浮动左右列。

Answer 2

首先尝试将其分成不同的分区：页眉，页脚，2个边和1个内容。双方再次由3个元素组成（在你的情况下可能是div）。

Answer 3

<div ></div> //top bar

<div id="left column" style="width:100px;float:left;">
   <div style="float:left; width:100px;">//left boxes
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
</div>

<div id="center column"  style="float:left; width:500px;">
     <div style="float:left; width:490px;"> //center box
</div>

<div id="rightcolumn" style="float:left; width:100px;">
   <div style="float:left; width:100px;">//right boxes
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
   <div style="float:left; width:100px;">
</div>

你也可以使用css属性height：190px;设定各种高度。希望这会帮助你。

css中的简单布局

3 个答案: