我想在一个div里用flex方式做出这种布局，请教应该怎么做
①到⑦都是父div的子div，①是纵向最长的子div，②到⑦是其他6个子div，现在我希望①~④的width相等，样子就像图片的这样，最好使用flex布局，因为表格布局不...
①到⑦都是父div的子div，①是纵向最长的子div，②到⑦是其他6个子div，现在我希望①~④的width相等，样子就像图片的这样，最好使用flex布局，因为表格布局不好添加子div（考虑到父div的width变大后，一行要变得能放更多个子div），使用float虽说是个不错的选择但我要怎么保证每列的width相等且正好填充满父div呢，我想使用flex的是考虑的有一个flex:1的属性，会自动填充满父div，而且子div设置min-width后父div的width变大后也容易在行里增加子div，但无法保证①和②③④的width相等，求给一个比较好的方案！
展开
2个回答
展开全部
<div class="center">
<div class="left">
1
</div>
<div class="right">
<div class="div d2">2</div>
<div class="div d3">3</div>
<div class="div d4">4</div>
<div class="div d5">5</div>
<div class="div d6">6</div>
<div class="div d7">7</div>
</div>
</div>
<style>
.center{width:800px; height:300px; margin:auto; background:#DC4244;}
.center .left,.cente .right,.center .right .div{float:left;}
.center .left{height:300px; background:#7353F3;}
.center .right .div{height:150px;}
.center .left,.center .right .div{width:25%;}
.center .right .d2,.center .right .d4,.center .right .d6{background:#E616EC;}
</style>
效果如图
追问
非常感谢但是，有一个很重要的属性就是，当“.center”的width扩大后，后面子元素可以加入空白扩大后的空白（在width很小时靠近more的div是隐藏的），以填满.center，而不是用百分比填满它。就像这几张图片似得，不同的是第一个div是跨行的
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
