奇怪的中心格式在几个浮动div的div div

我有一个问题，我想要有一个三div的div，其中有左浮列，右浮列和主要内容中间。我已经试过我所能做到这一点，我想出了这个：奇怪的中心格式在几个浮动div的div div

An Error!

出于某种原因，中间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; 
}

在这里发生了什么任何想法？

来源

2013-02-07 Imnotanerd

浮动一切到左边。 – Leeish

一个右浮动元素需要先在标记中出现。

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>

来源

2013-02-07 23:57:19 isherwood