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填充水平空间

回答

相关问题