如何制作3列布局

问题描述

|| 我有以下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组合分为三列而不是一列？而不是图像上方的文本（

<p>\'s>

），我如何更改它以使文本位于图像的右侧？所以最后，就像我有6列，其中3列是图像，而3列是文本。     

解决方法

        像这样 ：

<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属性