使用CSS将HTML表转换为div

时间:2016-11-27 18:15:41

标签: html css

我正在尝试使用div将此表格布局转换为其CSS等效项。

<table class="ourwork-table" cellpadding="0" cellspacing="0">
    <tr>
        <td><a href="http://www.google.com"><img src="http://cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" /></a></td>
        <td><a href="http://www.google.com"><img src="http://cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" /></a></td>
        <td><a href="http://www.google.com"><img src="http://cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" /></a></td>
    </tr>
    <tr>
        <td><a href="http://www.google.com"><img src="http://cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" /></a></td>
        <td><a href="http://www.google.com"><img src="http://cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" /></a></td>
        <td><a href="http://www.google.com"><img src="http://cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" /></a></td>
    </tr>
</table>

桌子的样式:

    .ourwork-table {
        width:100%;
    }

    .ourwork-table img {
          width: 100%;
          display:block;
    }

由于

1 个答案:

答案 0 :(得分:1)

<div class="row">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</div>
<div class="row">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
</div>

.row{
 width: 100%
}
.item{
display: inline-block;
float: left;
width: 33%;
}