CSS Layout（1 div - 4 imgs從右側浮動）

Question

我正在處理css layout，其中第一個div應該包含文本，div的寬度和高度應該根據內容靈活變化。在右邊應該有4個（未來可能更多）圖像具有相同的尺寸，最適合第一個div，但它們必須是正方形。現在我只是像this。有任何想法嗎？謝謝！

Answer 1

如何使用浮動？你將有兩個容器div。這些圖像可以很容易地放在一張桌子上，因爲它們的大小完全相同。如果提前知道圖像的寬度，可以將第一個div預先定義爲該寬度和高度，以便佈局太小時不會將圖像分開。

<div style="float:right;"> 
    <table> 
     <tr> 
      <td><img src="" /></td> 
      <td><img src="" /></td> 
     </tr> 
     <tr> 
      <td><img src="" /></td> 
      <td><img src="" /></td> 
     </tr> 
    </table> 
</div> 
<div> 
    <p>some text here</p> 
</div> 

Answer 2

您可以使用下面的HTML：

​<div id="wrapper"> 
    <div id="display">Some text</div> 
    <div id="rightBar"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

隨着下面的CSS：

#wrapper { 
    overflow: auto; 
    background-color: yellow; 
    display: inline-block 
} 

#display { 
    width: 100px; 
    height: 100%; 
    float: left; 
    border: 1px solid black; 
} 

#rightBar { 
    width: 100px; 
    background-color:red; 
    float: left; 
} 

#rightBar div { 
    border: 1px solid black; 
    width: 40px; 
    height: 40px; 
    display: inline-block; 
}​ 

看到一個活生生的例子here