我正在尝试使用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;
}
由于
答案 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%;
}