html - 围绕几个 float 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>