浮動div的擴展寬度

Question

給定兩個浮動div並排對齊時其寬度占據其容器的50％，當屏幕縮小到必須將第二個div推到一排時，它們的寬度可能會一直擴展到100％下？

以下面的代碼筆為例，水平縮小窗口，直到綠色的div及其容器移到紅色的容器下方。 是否可以使#wrap1和#wrap2的寬度#wrap2延伸到#container的右側，以便#one和#two相對於#container居中？ 即看起來像這樣 。

Answer 1

如果您不使用動態寬度，則可以添加媒體查詢以更改包裝位置上的容器行為。

否則，您需要參考flexbox的行為-Dimitar Stojanov的本指南提供了一些包裝示例。

[編輯：]固定鏈接。

Answer 2

您應該使用flexbox。 這是您的筆編輯的

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解決方案。不需要媒體查詢。

 #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 } 

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

Codepen演示