Sử dụng 'bảng' và 'ô bảng' bằng thuộc tính hiển thị trong thiết kế đáp ứng?

Question

Tôi đang sử dụng display: table; trên thùng và display: table-cell; trên yếu tố con, để làm nổi bật một số bài viết theo chiều ngang trên một trang. Điều này là, tôi không có ý tưởng làm thế nào để làm cho họ đáp ứng, tức là khi kích thước màn hình trở nên nhỏ hơn, mỗi đứa trẻ (tức là table-cell) nên trở nên nhỏ hơn tương ứng, trong khi tiếp tục ở lại theo chiều ngang.

Làm cách nào để thực hiện việc này?

• Ví dụ Code: http://www.codepen.io/anon/pen/dCLgq
• Demo: http://codepen.io/anon/full/dCLgq

Answer 1

Để mở rộng quy mô các container bên trong xuống với trang, bạn có thể thiết lập chiều rộng div 's container để 100%:

tại của bạn ví dụ:

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

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

hơn nữa, nếu bạn muốn mở rộng những hình ảnh với các container đứa trẻ, chỉ cần cung cấp cho họ width: 100%; cũng với height:auto;

thấy codepen bạn chia hai dưới đây:

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

Bạn có lẽ sẽ cần phải sử dụng phương tiện truyền thông truy vấn để thực sự có được nội dung bên trong để chơi độc đáo với nhau, nhưng vùng chứa sẽ mở rộng với trình duyệt, cũng như bên trong của div.