Question

我正在构建一个用户界面，我正在使用metro风格的瓷砖。我已经尝试将瓷砖放在另一个瓷砖上但由于某种原因，我无法将第二个瓷砖对齐到第一个瓷砖的底部。这就是它现在的样子：http://jsfiddle.net/44GQk/1/

有谁能告诉我如何将黑色瓷砖与蓝色瓷砖的底部对齐？这是CSS代码：

.tile {  
    width: 75%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;       
    padding: 20px;
    margin-bottom: 30px;
}
.blue 
{   
    background:#336E7B;
}
.black
{  
    background:#4DAF7C;
}

这是HTML：

<div class="tile blue box-alignment">
    <div align="center">
        <h2 class="icon-white">User Name</h2>
    </div>
    <div class="tile black" style="width:100%;margin-bottom:0px;padding:5px;background-color:rgba(26,26,26,255);opacity:0.7;">
    </div>
</div>

Answer 1

您可以使用position: absolute：

.tile {  
    width: 75%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;       
    padding: 20px;
    margin-bottom: 30px;
    position: relative;  /* required */
}
.blue 
{   
    background:#336E7B;
}
.black
{ 
    position: absolute;
    bottom: 0;
    left: 0;
    background:#4DAF7C;
}

但如果您的目标只是获得边框，我建议您使用此代码：

<div class="tile blue box-alignment">
    <div align="center">
        <h2 class="icon-white">User Name</h2>
    </div>
</div>

.tile {  
    width: 75%;
    display: inline-block;
    box-sizing: border-box;
    background: #fff;       
    padding: 20px;
    margin-bottom: 30px;
    border-bottom: 10px solid rgba(26,26,26,.7);
}
.blue 
{   
    background:#336E7B;
}

Answer 2

这取决于您希望他们在页面上排队的方式;你不需要使用绝对定位。

以下是我所做的更新：http://jsfiddle.net/44GQk/4/

HTML：

<div class="tile blue box-alignment">
    <div align="center">
        <h2 class="icon-white">User Name</h2>
    </div>
</div>
<!-- move the second tile outside of the first tile -->
<div class="tile black" style="margin-bottom:0px;padding:5px;background-               
                               color:rgba(26,26,26,255);opacity:0.7;">
</div>

CSS：

.tile {  
    width: 75%;
    /*display: inline-block; this causes space between the tiles and removes block 
            behavior of the div. 75% width on two elements causes wrapping, anyway.*/
    box-sizing: border-box;
    background: #fff;       
    padding: 20px;
    /*margin-bottom: 30px;  this causes space between the tiles.*/
}
.blue 
{   
    background:#336E7B;
}
.black
{  
    background:#4DAF7C;
}

将瓷砖对齐到另一个瓷砖的底部

2 个答案: