是怎样炼成的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属性