Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

css如何设置block子元素平均分布,并指定个数

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

想要实现block宽度分布自适应,并且指定每行显示多少个block,用display:flex实现的好像所有元素都指定在一行,无法换行,用指定百分比宽度如果是奇数行数就会出现两遍分布宽度不均等的问题例如width:33%,请问有没有完美的实现的方法


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

<div class="container">

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

</div>
<style>
.container {

overflow: hidden;
background: green;

}
.block {

height: 100px;
background: red;
margin: calc(10% / 6);
width: 30%;
float: left;

}
</style>


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...