CSS定位div

Question

在定位div方面我总是很弱，但这种情况稍微难以找到在线解决方案。我正试图像这样定位盒子：

 _  ___  _ 
|_||   ||_|
 _ |   |
|_||___|

有没有办法避免专门定义每个像素的位置，并让它们插入到我所拥有的三列中？

Answer 1

为每列定义三个容器，并将它们浮动到左侧：

<div style="float:left;width:Xpx"></div>
<div style="float:left;width:Ypx"></div>
<div style="float:left;width:Zpx"></div>

现在，您可以将所有容器放在此列的适当位置。

Answer 2

看看这个小提琴：http://jsfiddle.net/rREAh/这就是你要找的东西吗？

如果您需要完美的布局，请查看yahoo布局管理器：http://developer.yahoo.com/yui/layout/

Answer 3

请参阅： http://jsfiddle.net/qXwKT/

<强> CSS：

.box {
    background: #ffffff;
    padding: 5px;
    border: 1px solid #b3b3b3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#container {
    margin: 0 auto;
    width: 400px;
    background: #ccc;
    overflow: hidden
}
#left, #right {
    float: left;
    width: 75px;
}
#mid {
    float: left;
    width: 250px;
}
#mid .box {
    margin: 0 10px;
    border-color: red
}
#left .box {
    margin: 0 0 10px 0;
    border-color: blue
}

<强> HTML：

<div id="container">
    <div id="left">
        <div class="box">left 1</div>
        <div class="box">left 2</div>
    </div>
    <div id="mid"><div class="box">mid</div></div>
    <div id="right"><div class="box">right</div></div>
</div>

Answer 4

另请看一下这个：jsfiddle example，它有流畅的布局。

并且another one在左下角没有固定的div。