How to make child div fluid with respect to parent

问题:

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:

回答1:

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/

回答2:

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/

回答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>

回答4:

Just add text-align: center to the parent div.