L'utilisation de 'table' et 'table-cellule' avec la propriété d'affichage dans la conception sensible?

Question

J'utilise display: table; sur le récipient et display: table-cell; sur les éléments de l'enfant, pour mettre en évidence certains postes horizontalement sur une page. Le fait est que je n'ai aucune idée de la façon de les rendre réactifs, c'est-à-dire que lorsque la taille de l'écran diminue, chaque enfant (par exemple table-cell) devrait devenir proportionnellement plus petit, tout en restant aligné horizontalement.

Comment faire?

• Exemple de code: http://www.codepen.io/anon/pen/dCLgq
• Démo: http://codepen.io/anon/full/dCLgq

Answer 1

Pour redimensionner les conteneurs internes vers le bas avec la page, vous pouvez définir la largeur du conteneur div-100%:

dans votre exemple:

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

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

De plus, si vous voulez à l'échelle les images avec les conteneurs enfants, juste leur donner width: 100%; aussi bien avec height:auto;

voir votre codepen fourchue ci-dessous:

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

Vous aurez probablement besoin d'utiliser les médias requêtes pour vraiment obtenir les choses à l'intérieur de jouer bien ensemble, mais le conteneur sera à l'échelle avec le navigateur, tout comme les intérieurs div.