Question

给定两个浮动的div，当并排对齐时，其宽度占其容器的50％，当屏幕缩小到第二个div必须的位置时，它们的宽度可以一直延伸到100％推下一排？

以下面的codepen为例，水平收缩窗口，直到绿色div及其容器移动到红色下方。是否可以将#wrap1和#wrap2的宽度一直延伸到#container的右侧，以便#one和#two以尊重为中心到#container？即所以它看起来像this。

Answer 1

如果您不使用动态宽度，则可以添加媒体查询以更改换行位置上的容器行为。

否则你需要参考flexbox bevhaviour - this guide by Dimitar Stojanov有一些关于包装的例子。

[编辑：]固定链接。

Answer 2

你应该使用flexbox。 Here is your Pen edited

CSS：

#container{
  background: rgba(0,0,0,.1);
  width:100%;
  height:auto;
  position: relative;
  overflow: hidden;
  display: flex;
}

@media screen and (max-width: 800px) {
  #container{
    flex-direction: column;
  }
}

.wrap1{
  background: rgba(100,10,10,.2);
  flex-grow: 1;
}
.wrap2{
  background: rgba(10,100,10,.2);
  height: 100px;
  flex-grow: 1;
}

Answer 3

您可以使用Bootstrap CSS执行此操作。您将要创建一个流体容器，然后创建两个内部div。内部div将具有类col-md-6，对于大屏幕将为50％，对于xtra小屏幕将为col-xs-12。这将使用浏览器自动调整大小。

<div class="container-fluid">
  <div class="col-md-6 col-xs-12">Div 1</div>
  <div class="col-md-6 col-xs-12">Div 2</div>
</div>

Answer 4

flexbox解决方案......不需要媒体查询。

＆＃13;

#container {
  background: rgba(0, 0, 0, .1);
  display: flex;
  flex-wrap: wrap;
}
[class^="wrap"] {
  flex-grow: 1;
  flex-shrink: none;
}
.wrap1 {
  background: rgba(100, 10, 10, .2);
}
.wrap2 {
  background: rgba(10, 100, 10, .2);
 height: 100px;
}
#one {
  width: 200px;
  height: 200px;
  background: rgba(100, 100, 0, .1);
  margin: 0 auto;
}
#two {
  width: 300px;
  height: 100px;
  background: rgba(100, 100, 0, .1);
  margin: 0 auto
}

＆＃13;

<div id="container">

  <div class="wrap1">
    <div id="one">
    </div>
  </div>

  <div class="wrap2">
    <div id="two">

    </div>
  </div>

</div>

＆＃13;

Codepen Demo

扩展浮动div的宽度

4 个答案: