Question

最近我正在玩display：inline-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;
}

Answer 1

那是因为你在黑色和棕色的中间有一个白色块，所以你需要做的是删除这个白色块。 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>

页面全宽后第二行的内联块对齐

1 个答案: