<分区>
html - 页面全宽后第二行的行内 block 对齐
最近我在玩 display:inline-block 元素，过了一段时间我遇到了一个问题。我试图将不同大小的彩色 block 放入全宽页面，一切都很顺利，但是当我结束第一行全宽 block 时，第二行没有按照我想要的方式对齐。所以现在我有这个例子:
这里唯一的问题是黑色 block 应该在深红色(棕色) block 的正下方，没有任何空白。绿色方 block 在它的位置，红色和黄色也在。
我的 html:
<div id="container">
<div class="cyanBlock"></div><!--
--><div class="brownBlock"></div><!--
--><div class="orangeBlock"></div><!--
--><div class="blueBlock"></div><!--
--><div class="whiteBlock"></div><!--
--><div class="blackBlock"></div><!--
--><div class="greenBlock"></div><!--
--><div class="redBlock"></div><!--
--><div class="yellowBlock"></div>
</div>
我的 CSS:
body {
margin: 0px;
}
#container {
width:100%;
position: relative;
}
.cyanBlock {
width:100%;
height:10%;
background-color:cyan;
display: inline-block;
}
.brownBlock {
width:35%;
height:20%;
background-color:brown;
vertical-align: top;
display:inline-block;
}
.orangeBlock {
vertical-align: top;
width:25%;
height:35%;
background-color:orange;
display: inline-block;
}
.blueBlock {
vertical-align: top;
display: inline-block;
width:20%;
height:35%;
background-color:blue;
}
.whiteBlock {
vertical-align: top;
width:20%;
height:90%;
background-color:white;
position: absolute;
display: inline-block;
}
.blackBlock {
vertical-align: top;
width:35%;
height:25%;
background-color:black;
display: inline-block;
}
.greenBlock {
vertical-align: top;
width:45%;
height:10%;
background-color:green;
display: inline-block;
}
.redBlock {
vertical-align: top;
width:50%;
height:45%;
background-color:red;
display: inline-block;
}
.yellowBlock {
vertical-align: top;
width:30%;
height:45%;
background-color:yellow;
display: inline-block;
}
最佳答案
那是因为你在黑色和棕色中间有一个白色 block ，所以你要做的就是删除这个白色 block 。 html 代码将是这样的:
<div id="container">
<div class="cyanBlock"></div><!--
--><div class="brownBlock"></div><!--
--><div class="orangeBlock"></div><!--
--><div class="blueBlock"></div><!--
--><!-- The white block has to disappear (and remove the white block's CSS class
--><div class="blackBlock"></div><!--
--><div class="greenBlock"></div><!--
--><div class="redBlock"></div><!--
--><div class="yellowBlock"></div>
</div>
关于html - 页面全宽后第二行的行内 block 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40193095/