如何使孩子的div相对于父母具有流动性

Question

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:

Answer 1

I've added jsfiddle with a possible solution, but I'm not sure if I understood your question correctly. Can you confirm this is what you're looking for?

You need to define a media query with width for a specific breakpoint:

@media (min-width: 1000px) {
  .child {
    width: 33.33%;
  }
}

More details in the fiddle:

https://jsfiddle.net/wz5raza3/

Ofcourse, depending on your solution, you need more than this, like paddings, margins or equal column height. For any real-world usage, you would be better off with flexbox.

If you only want to learn basic layouting using older methods, I would suggest: http://learnlayout.com/

Answer 2

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/

Answer 3

Here's an approximate solution to your problem using @media screen . You can adjust the values of the screen and width of your content blocks as required.

 @media screen and (max-width: 350px) { .block { width:150px; } } @media screen and (max-width: 500px) and (min-width: 351px) { .block { width:196px; } } @media screen and (max-width: 999px) and (min-width: 501px) { .block { width:48%; } } @media screen and (min-width: 1000px) { .block { width:32%; } } .container { text-align:center; } .block { text-align:left; display:inline-block; background-color:#ddd; height:175px; margin:0px; padding:0px; } body { margin:0px; padding:0px; } 

 <div class="container"> <div class="block">block</div> <div class="block">block</div> <div class="block">block</div> <div class="block">block</div> <div class="block">block</div> <div class="block">block</div> </div> 

Answer 4

只需将text-align: center添加到父div。