Question

这个问题之前也出现过类似的问题，但是我已经环顾四周，无法向其他人发现这种情况。

我可以在HTML中使用图像制作一个4x4网格div，但是我想要一个div（右上角）。当我在该div中输入<p>Some text</p>时，它会向左下方的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;
}

它应该修复它。这是一个有效的fiddle。

而here是一篇关于显示的有趣文章：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;
}

CSS / HTML 2x2网格问题

1 个答案: