Geek Answers Handbook

Using "table" and "table-cell" with display in a flexible design?

Using table and table-cell

I use display: table; in the container and display: table-cell; for children to highlight some posts horizontally on the page.

The fact is that I have no idea how to make them responsive, i.e. the screen size becomes smaller, each child (i.e. table-cell ) should become proportionally smaller, while remaining horizontally horizontal.

How to do it?

+6
source share
1 answer

To scale the inner containers on the page, you can set the width of the div container to 100% :

in your example:

 #the-big-stories { display: table; table-layout: fixed; /** add 100% width **/ width:100%; }

further, if you want to scale images using child containers, just give them width: 100%; also using height:auto;

see below code of your code:

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

You will probably need to use media queries to really make the material inside play well together, but the container will scale using the browser, as will the internal div .

+10
source

More articles:


All Articles