2013-07-24 3 views
3

Я выстроил пять изображений в строке с текстом под каждым, и я пытаюсь сделать его отзывчивым. Проблема в том, что все изображения не масштабируются должным образом. Я хочу, чтобы все они имели ту же ширину & height.Отзывчивый ряд изображений и текст


Мой код до сих пор:

<table> 
    <tr> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>testing text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>Longerishhh texting text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>Text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>Quite long text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>More testing</p> 
     </td> 
    </tr> 
</table> 

CSS:

html{ 
    width: 100%; 
} 

table{ 
    width: 80%; 
} 

td{ 
    display: table-cell; 
    width: 20%; 
    text-align: center; 
    overflow: hidden; 
    vertical-align: baseline; 
} 

img{ 
    width: 100%;  
} 

jsfiddle

+0

попробовать это http://jsfiddle.net/Y7CrV/4/ или HTTP: //elvery.net/demo/responsive-tables/ – falguni

ответ

4

добавить следующее к таблице CSS:

table-layout: fixed; 

В вашем случае:

table { 
    width: 80%; 
    table-layout: fixed; 
} 

обновленный jsfiddle здесь - http://jsfiddle.net/Y7CrV/7/

1
html{ 
    width: 100%; 
} 

table{ 
    width: 80%; 
} 
tr{width:100%;} 
td{ 
    display: table-cell; 
    width: 20%; 
    text-align: center; 
    overflow: hidden; 
    vertical-align: baseline; 
word-break: break-all; 
} 

img{ 
    width: 100%;  
} 
0

Почему бы не использовать плавающие дивы?

div.row { 
    width: 80%; 
} 

/* clearfix */ 
div.row { zoom:1; } 
div.row:before, div.row:after { content:""; display:table; } 
div.row:after { clear:both; } 

div.row .column { 
    width: 20%; 
    float: left; 
    text-align: center; 
    overflow: hidden; 
} 

См: http://jsfiddle.net/Y7CrV/8/

Но если вы хотите больше гибкости, вы можете захотеть взглянуть на http://foundation.zurb.com/grid.php

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