CSS:布局有3列,主要内容有浮动元素

时间:2012-08-11 06:28:36

标签: css layout css-float

我希望fiddle可以解释我想要的东西。 当我有一个3列的布局(一个左,一个右和最后一个在中心(没有在CSS上设置flot),布局是完美的!但是,如果我想在中心空间添加一些元素,在CSS中设置浮点,如果我设置一个“clear:left;”,我会在左栏内容的末尾得到新元素......这是令人讨厌的结果!

然而,如果你看到我的小提琴,你可以更好地记录我想要的东西。

2 个答案:

答案 0 :(得分:2)

如果我正确理解你,你不能在clear:left;的中心添加元素,没有理由这样做。将所有元素赋予display: inline-block;vertical-align:top;然后设置您的html。它们将是一个左,一个右和最后一个在中心,和一个不需要的元素。

<div class="width:200px;/* you can set if you want */">fist elem</div>
<div>content</div>
<div>some elements</div>
<div class="width:200px;/* you can set if you want */">last elem</div>

答案 1 :(得分:1)

确保您仔细使用width,min-width,max-width css属性, 并且要非常小心位置:relative和display:block。

在使用上述css属性的最后使用边距,并且在没有 BORDERS 的情况下不能在css中工作我继续为css中的所有初学者写这个,但是永远不要忘记css中的那个规则因为如果你不为元素添加边框,那么你和其他人都很难看到设计开始破坏的地方。

要记住使用浮点数时需要记住的另一点,请确保浮动元素具有相同的高度,因为

|  |
|  |    | |

当这些div中的每一个(左边一个高度为100px,右边一个带有50px)浮动时,右边的div会出现在div左下方。