当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Fit div width to floated content

问题描述:

This question already has an answer here:

  • CSS when inline-block elements line-break, parent wrapper does not fit new width

    1 answer

网友答案:

You can change the container width based on screen size using media query. .container in normal takes width equal to children width, and each children takes width: 102px (width + border left/right) , .container width = children width + container border;

When the screen get width smaller than .container width then, it will push the last element below. from this point you can set media query based on .container width.

https://jsfiddle.net/v5czL9he/2/

* {
  margin:0;
  padding: 0;
}

.container {
  border: 1px solid red;
  display: table;
}

.content {
  border: 1px solid blue;
  width: 100px;
  height: 100px;
  float: left;
}

/* if screen width < .container width
   decrease last element from fisrt row
   decrease it's width from the container width
*/
@media only screen and ( max-width: 308px ) {
 .container {
   width: calc( 306px - 102px );
 }
}

@media only screen and ( max-width: 206px ) {
 .container {
   width: calc( 204px - 102px );
 }
}
<div class="container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div style="clear:both"></div>
</div>
网友答案:

By adding fixed width? (if I understand correctly what you want)

width:305px;
分享给朋友:
您可能感兴趣的文章:
随机阅读: