2 div填充水平空間

我有2個div的父包裝。我想提出以下幾點：2 div填充水平空間

這2個div的份額100％的寬度空間，所以它們之間沒有間隙，一切都是紅色。
當你縮小包裝下來時，div b會落入div a以下的新行（這表現應該是這樣），但在這種情況下，我希望兩個div都是100％寬度，所以它們會使2行紅色顏色。

是否有可能做到這一點只與CSS（沒有表！）和沒有額外的元素？

使包裝背景顏色爲紅色來彌補這不是解決方案。

<div class="wrapper"> 
    <div class="a">left</div> 
    <div class="b">right</div> 
</div>

http://jsfiddle.net/EAkLb/75/

來源

2016-01-23 Toniq

你是什麼方法縮小包裝？ CSS媒體查詢？ – smdsgn

的CSS只是改變width:50%;兩個a和b，添加一個媒體查詢將它們設置爲100％在較小的視口。

.wrapper{ 
 
    position: relative; 
 
    max-width: 400px; 
 
    height:30px; 
 
    background-color: #fff; 
 

 

 
} 
 
.a{ 
 
    float: left; 
 
    background-color: red; 
 
    text-align: left; 
 
    width:50%; 
 
    height:30px; 
 
} 
 
.b{ 
 
    float: right; 
 
    background-color: red; 
 
    text-align: right; 
 
    width:50%; 
 
    height:30px; 
 

 
} 
 

 
@media screen and (max-width: 500px) { 
 
    .a, .b { 
 
    width: 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="a">left</div> 
 
    <div class="b">right</div> 
 
</div>

來源

2016-01-23 19:23:00 LGSon

Flexbox，就可以做到這一點：

JsFiddle demo

.wrapper { 
 
    position: relative; 
 
    max-width: 400px; 
 
    height: 30px; 
 
    background-color: #fff; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.a { 
 
    background-color: red; 
 
    text-align: left; 
 
    flex: 0 0 110px; 
 
    height: 30px; 
 
} 
 
.b { 
 
    background-color: red; 
 
    text-align: right; 
 
    flex: 0 0 120px; 
 
    height: 30px; 
 
} 
 
@media screen and (max-width: 400px) { 
 
    .a, 
 
    .b { 
 
    flex: 1 0 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="a">left</div> 
 
    <div class="b">right</div> 
 
</div>

來源

2016-01-23 19:11:36

考慮你正在使用CSS媒體查詢，你可以簡單地更改寬度和你的div的CSS的float屬性。這不是現代的方式，但它的工作。

.wrapper{ 
    position: relative; 
    max-width: 400px; 
    height:30px; 
    background-color: #fff; 
} 

.a, .b { 
    float: left; 
    width: 50%; 
} 

.a{ 
    background-color: red; 
    text-align: left; 
    height:30px; 
} 

.b{ 
    background-color: red; 
    text-align: right; 
    height:30px; 
} 

@media screen and (max-width: 400px) { 
    .a, .b { 
    float: none; 
    width: 100%; 
    } 
}

來源

2016-01-23 19:26:24 smdsgn

flex的美之處在於可以避免使用媒體查詢。

結合使用flex與min-width和flex-wrap我們可以在沒有媒體查詢的情況下達到預期效果。

.wrapper{ 
 
    position: relative; 
 
    max-width: 400px; 
 
    height:30px; 
 
    background-color: #fff; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    flex-grow: 1; 
 
    background-color: red; 
 
    height:30px; 
 
} 
 

 
.a{ 
 
    min-width:110px; 
 
    text-align: left; 
 
} 
 

 
.b{ 
 
    min-width:120px; 
 
    text-align: right; 
 
}

<div class="wrapper"> 
 
    <div class="child a">left</div> 
 
    <div class="child b">right</div> 
 
</div>

這裏有一個JSFiddle。

來源

2016-01-23 19:33:05

我的解決方案也使用Flex - 但我使用了最小寬度attr。告訴柔性容器時，切換到2線

.wrapper{ 
    position: relative; 
      max-width: 100%; 
    height:30px; 
    background-color: #fff; 
      display: flex; 
      flex-wrap:wrap ; 
} 
.a,.b { 
    background-color: red; 
      width:50%; 
      min-width:130px; 
    height:30px; 
      flex-grow:1; 
      flex-shrink:0; 
      flex-basis:50% 
} 

.b { 
    background-color:green; 
    text-align:right; 
}

fiddle

使用滑塊使窗口小我用綠色作爲背面爲「B」元素

來源

2016-01-23 19:33:50 halfbit

2 div填充水平空間

回答

相關問題