奇怪的中心格式在幾個浮動div的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

如果您願意，您可以使用腳手架對其進行自定義。