html - 围绕几个浮动 div 的 div 上的奇怪中心格式

Question

我遇到了一个问题，我试图拥有一个由三个 div 组成的 div，其中有一个左浮动列、右浮动列和中间的主要内容。我已经尽我所能做到这一点，我想出了这个：

出于某种原因，中间 div 位于第一列的末尾和右列的末尾之间，而不是右侧的开头。

<div id="main">
            <div id="left">
                <img src="/pic1.jpg" alt="Example work" height="250px" width="250px" />
                <br />
                <img src="/pic2.jpg" alt="Example work" height="250px" width="250px" />
            </div>
            <div id="content">
                words
            </div>
            <div id="right">
                <img src="/pic3.jpg" alt="Example work" height="250px" width="250px" />
                <br />
                <img src="/pic4.jpg" alt="Example work" height="250px" width="250px" />
            </div>
</div>

CSS：

#main {
        margin: 0 auto;
        width: 80%;
}

#left {
        float: left;
        padding: 5px;
        border: 2px ridge;
}

#right {
        float: right;
        padding: 5px;       
        border: 2px ridge;
}

#content {
        text-align: center;
}

关于这里发生了什么的任何想法？

Answer 1

右浮动元素需要在标记中排在首位。

http://jsfiddle.net/Vv4yA/

<div id="main">
    <div id="right">
        <img src="http://placehold.it/150x150" />
        <br />
        <img src="http://placehold.it/150x150" />
    </div>
    <div id="left">
        <img src="http://placehold.it/150x150" />
        <br />
        <img src="http://placehold.it/150x150" />
    </div>
    <div id="content">words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words </div>
</div>

Answer 2

您的内容被推向左元素，因为左元素是浮动的。你的右元素是向右浮动的，IE 对着父元素。它不与内容元素交互，它们本质上是重叠的。您真正想要的是向左浮动的三个元素，因此每个元素都从另一个停止的地方开始。

我会在左右元素上设置 10% 的宽度，这样它们加起来就是 100%，无论如何都要使用 box-sizing。

Answer 3

使用脚手架加快开发速度。试试Twitter 的 Bootstrap

如果您愿意，您可以仅使用脚手架对其进行自定义。