是怎樣煉成的3列布局

Question

我有以下的HTML文件：

<!-- this is column 1 --> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
<img src="http://www.google.com" /> 

<!-- this is column 2 --> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
<img src="http://www.google.com" /> 

<!-- this is column 3 --> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
<img src="http://www.google.com" /> 

等..

怎樣的作風，所以我的DIV/IMG組合分成3列，而不是隻有一列？而不是圖像上方的文字（<p>'s>），我該如何改變它以便文字位於圖像的右側？所以最後，就像我有6列，其中3個是圖像，3個是文本。

Answer 1

像這樣：

<style type="text/css"> 
.column, .repairGuruBoxRC, .image {float:left;} 
.column {width:200px;} /* not essential, a div will expand to the size of the content inside it */ 
.repairGuruBoxRC, img.image{ 
    width:100px; 
    height:100px; 
} 

</style> 

<!-- this is column 1 --> 
<div class="column"> 
<img class="image" src="http://www.google.com"/> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
</div> 

<!-- this is column 2 --> 
<div class="column"> 
<img class="image" src="http://www.google.com"/> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
</div> 

<!-- this is column 3 --> 
<div class="column"> 
<img class="image" src="http://www.google.com"/> 
<div class="repairGuruBoxRC"> 
    <p>Hi</p> 
    <p>hello</p> 
</div> 
</div> 

你可能想看看CSS的float屬性