Использование «table» и «table-cell» с возможностью отображения в гибком дизайне?

Question

Я использую display: table; на контейнере и display: table-cell; на дочерние элементы, чтобы выделить некоторые посты горизонтально на странице.

Дело в том, что я не имею ни малейшего представления о том, как сделать их отзывчивыми, т. Е. При уменьшении размера экрана каждый ребенок (т. Е. table-cell) должен стать пропорционально меньшим, продолжая оставаться горизонтально горизонтально.

Как это сделать?

• Пример кода: http://www.codepen.io/anon/pen/dCLgq
• Демо: http://codepen.io/anon/full/dCLgq

Answer 1

Для масштабирования внутренних контейнеров вниз страницы, вы можете установить ширину контейнера div «S в 100%:

в вашем пример:

#the-big-stories { 
    display: table; 
    table-layout: fixed; 

    /** add 100% width **/ 
    width:100%; 
} 

дальше, если вы хотите масштабировать изображения с дочерними контейнерами, просто дать им width: 100%;, а также с height:auto;

увидеть ваши codepen раздвоенный ниже:

http://codepen.io/braican/pen/xCmsw

Вы, вероятно, необходимо использовать средства массовой информации чтобы действительно получить материал внутри, чтобы играть хорошо вместе, но контейнер будет масштабироваться с помощью браузера, как и внутренние div.