2016-11-27 2 views
-6

Я пытаюсь преобразовать этот макет таблицы в его эквивалент CSS, используя div.Преобразование таблицы HTML в 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

И что вопрос, который вы забыли спросить? –

ответ

0
<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%; 
} 
+0

Он работает, однако, он не остается содержащимся в оболочке, в которой он находится. Как я могу заставить эту «ширину строки: 100%» содержать в родительском div? –

+0

Ну, я не знаю макета родительского div, поэтому не знаю. Отправьте код, и я проверю его – kenny

Смежные вопросы