Question

我认为这是一个常见问题，但我无法弄清楚我做错了什么。我有这个案例：http://codepen.io/anon/pen/BjWNMr

我希望我的容器宽度适合其内容。当孩子们在同一行时，这很好用。但是，如果我们减少视口的宽度，如果孩子在两行或更多行上，则容器的宽度不再适合其内容。

以下是代码：

HTML：

<div id="container">
  <div class="dub"></div>
  <div class="dub"></div>
  <div class="dub"></div>
</div>

CSS：

#container {
  background: grey;
  margin: auto;
  border: 5px solid green;
  /*float: left;
  overflow: auto;*/
  display: inline-block;
}

#container::after {
  clear: left;
}

.dub {
  width: 440px;
  height: 150px;
  background: linear-gradient(to right, orange, red);
  border: 2px solid white;
  float: left;
}

感谢并抱歉这个愚蠢的问题。

Answer 1

您可以使用flex-layout来实现此目的。全屏打开此代码段。

将display: flex和flex-flow: row wrap提供给父元素。和flex: 1 100%让孩子占据整个空间。

在媒体查询中，将flex: 1 auto提供给正常inline显示

的儿童

为方便起见，更改媒体查询中的值。

#container {
  background: grey;
  margin: auto;
  border: 5px solid green;
  /*float: left;
  overflow: auto;*/
  display: inline-block;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

#container::after {
  clear: left;
}

.dub {
  width: 440px;
  height: 150px;
  background: linear-gradient(to right, orange, red);
  border: 2px solid white;
  float: left;
  flex: 1 100%;
 
}

@media all and (min-width: 1360px) {
  .dub { flex: 1 auto; }
}

<div id="container">
  <div class="dub"></div>
  <div class="dub"></div>
  <div class="dub"></div>
</div>

容器适合内容（多行）

1 个答案: