我正在尝试布局2个全宽度和2个半宽度的div(最后2个div应该在一行中).
HTML如下所示:
<div class="container"> <div class="box--full">1</div> <div class="box--full">2</div> <div class="box--half">3</div> <div class="box--half">4</div> </div>
CSS:
* { box-sizing: border-box; } .container { display: flex; width: 200px; flex-flow: row wrap; } [class*="box--"] { display: flex; margin: .25rem; height: 2rem; padding: .25rem; color: white; } .box--full { background: red; flex: 1 1 100%; } .box--half { background: blue; flex: 1 1 50%; }
我想知道为什么最后两个div没有可用宽度的一半,为什么它们不在一行中.我想避免为最后2个div添加一个包装器.
我发现添加flex:0 1 50%将所需宽度应用于最后2个div但它们仍然不是内联的.
是否可以在不制作额外包装的情况下使它们内联?
这是codepen的链接:http://codepen.io/sunpietro/pen/Mepmam
解决方法
它们不在同一行,因为它们确实有边距,边距占用一点空间,所以你必须减少百分比:
* { box-sizing: border-box; } .container { display: flex; width: 200px; flex-flow: row wrap; } [class*="box--"] { display: flex; margin: .25rem; height: 2rem; padding: .25rem; color: white; } .box--full { background: red; flex: 1 1 100%; } .box--half { background: blue; flex: 1 1 30%; }
<div class="container"> <div class="box--full">1</div> <div class="box--full">2</div> <div class="box--half">3</div> <div class="box--half">4</div> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。