如何使孩子的div相对于父母具有流动性 [英] How to make child div fluid with respect to parent

问题描述

我有一个根据屏幕尺寸的two/three列布局.

如果窗口大小大于1000，则我需要遵循3 column布局，否则我需要遵循two column布局.

我已经使用JS实现了这一点，但是代码非常混乱.现在，我想使用CSS做到这一点.但是我被困住了.

这是JSFiddle: https://jsfiddle.net/7kuah16h/1/

常量:

Child Min Width (148px) including padding
child Max Width (196px) including padding

如果窗口大小"为500px(例如，例如)，则子级必须分别为196px和two column.

如果窗口大小"为350px，则two column中的每个子项必须为175px.

如果窗口大小变为1000px，则应将其转换为3列布局.

如果窗口大小小于1000px，则所有内容应居中对齐.

孩子必须将其宽度a/c更改为可用宽度.

我的要求:

解决方案

如果您只想支持现代浏览器可以使用弹性框，避免使用浮动框和溢出框.响应式设计和移动技术要好得多.

.parent {
    display: flex;
    flex-wrap: wrap;
}
.child {
    height: 50px;
    flex: 0 1 50%; // 2 boxes 
 }

 @media (min-width: 1000px) {
   .child {
       flex: 0 1 33.33%; // 3 boxes for screens bigger than 1000px 
   }
 }

更新您的提琴: https://jsfiddle.net/7kuah16h/9/

I have a two/three column layout based on screen size.

If window size is greater than 1000 than I need to follow 3 column layout else I need to follow two column layout.

I have achieved this using JS but the code is very messy. Now I want to do it using CSS. But I am stuck.

Here is JSFiddle : https://jsfiddle.net/7kuah16h/1/

Constants:

Child Min Width (148px) including padding
child Max Width (196px) including padding

If Window Size is 500px (for eg) Child must be 196px each and two column.

If Window Size is 350px Child must be 175px each in two column.

If Window size becomes 1000px then It should convert to 3 column Layout.

In case window size is less than 1000px all content should be aligned center.

Child must change its width a/c to available width.

My Requirements:

解决方案

If you just want to support modern browsers you can use flex boxes and avoid the use of floating boxes and overflows. Much better for responsive design and mobile.

.parent {
    display: flex;
    flex-wrap: wrap;
}
.child {
    height: 50px;
    flex: 0 1 50%; // 2 boxes 
 }

 @media (min-width: 1000px) {
   .child {
       flex: 0 1 33.33%; // 3 boxes for screens bigger than 1000px 
   }
 }

Update your fiddle: https://jsfiddle.net/7kuah16h/9/

这篇关于如何使孩子的div相对于父母具有流动性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！