围绕几个浮动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％，无论如何都要使用盒子大小。

Answer 3

使用脚手架更快地开发。试试Twitter's Bootstrap

如果您愿意，可以只使用脚手架来自定义它。