Welcome toVigges Developer Community-Open, Learning,Share

Categories

0 votes
267 views
in Technique[技术] by (31.9m 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 (31.9m 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 Vigges Developer Community for programmer and developer-Open, Learning and Share

548k questions

547k answers

4 comments

32.1k users

...