我怎样才能为我的方框提供相同的间距,而不是将它们全部放在一起,右边有这么多空间?
我通常使用 display flex 因为它很容易做到这一点,但由于并非所有浏览器都支持 flex 属性,我正在尝试另一种方法。
下面是我的代码,希望对你有所帮助。
.main > div{
float: left;
height: 100px;
width: 200px;
}
.yellow{
background: yellow;
}
.red{
background: red;
}
.green{
background: green;
}
.black{
background: black;
}
<div class="main">
<div class="red">
</div>
<div class="green">
</div>
<div class="yellow">
</div>
<div class="black">
</div>
</div>
最佳答案
你可以试试这个
.main {
text-align: justify;
}
.main:after {
content: '';
display: inline-block;
width: 100%;
}
div>div {
display: inline-block;
/* height, width and border for demo purpose only */
height: 50px;
width: 100px;
border: thin solid darkgray;
}
/* for browsers that support flex */
@supports (display:flex) {
.main {
width: 100%;
display: flex;
justify-content: space-between;
}
.main:after {
display: none;
}
}
<div class="main">
<div class="red"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="black"></div>
</div>
关于html - 显示 flex 的回退,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45561447/