CSS/HTML 2x2网格问题

Question

这个问题之前也出现过类似的问题,但是我已经环顾四周,无法找到其他任何人.

我可以在HTML中使用图像制作一个4x4网格div,但是我想要文本中的一个div(右上角).当我进入<p>Some text</p>该div时,它在div下方向左移动,而底部两个仍在对齐并位于移动的文本div下.

我已经尝试将高度固定但没有任何改变,div刚刚向上移动但其他人仍保持原状.

CSS:

/* Page Content */

.container
    {width: 910px;
    height: auto;
    margin: 0px auto;
    padding-top: 35px;
    position: relative;}

/* Home Page Content */

.gridblock, .gridblock2, .gridtext
    {width: 450px;
    height: 200px;
    padding: 0px;
    position: relative;
    display: inline-block;}

.gridblock
    {margin: 2px;}

.gridblock2, .gridtext
    {margin: 3px, 0px, 3px, 0px;}

.gridtext
    {width: 450px;
    height: 200px;
    position: relative;
    background-color: #f9f9f9;}

HTML:

<div class="container">
    <div class="gridblock">
        <img src="images/homegrid1.jpg" alt="3345 Mastering">
    </div>
    <div class="gridtext">
        <p>Some Text</p>    
    </div>
    <div class="gridblock">
        <img src="images/homegrid2.jpg" alt="3345 Mastering">
    </div>
    <div class="gridblock2">
        <img src="images/homegrid3.jpg" alt="3345 Mastering">
    </div>
    <ul class="footer">
    </ul>

这是一个在线演示:http://jsfiddle.net/saidbakr/2LCwg/

Answer 1

如果我没回答你的问题，问题似乎出在房产上display:inline-block。

添加vertical-align:top到您的.gridtext班级：

.gridtext {
    vertical-align:top;
}

它应该修复它。这是一个工作小提琴。

这是一篇关于 display:inline-block 属性的有趣文章。

或者，您可以删除该display:inline-block属性（默认情况下，您的 div 将显示为块）并为它们提供浮动：

.gridblock, .gridblock2, .gridtext {
    width: 450px;
    height: 200px;
    padding: 0;
    position: relative;
    float:left;
}

另外，当您处理图像时，您可以添加overflow:hidden到上述类，以确保这些图像不会扩展到其容器之外并弄乱网格。

.gridblock, .gridblock2 {
    overflow:hidden;
}