Question

我正在网页上工作，我希望它看起来像Windows 8的开始菜单中的那些磁铁（或瓷砖，无论你喜欢称呼它们）。经过一些工作，我得到以下内容： / p>

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link href='http://fonts.googleapis.com/css?family=Bad+Script|Architects+Daughter|Comfortaa|Handlee' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="banner-div">
    </div>
    <div class="row">
        <div class="magnets">
            Some text
        </div>
        <div class="magnets">
        </div>
        <div class="magnets">
        </div>
    </div>
    <div class="row">
        <div class="magnets">
        </div>
        <div class="magnets">
        </div>
        <div class="magnets">
        </div>
    </div>
</body>
</html>

styles.css的

html, body {
    background:#f8e4e4;
    font-family:'Bad Script';
    font-size:medium;
    text-align:center;
    width:100%;
}

.magnets {
    border:5px solid black;
    height:300px;
    width:300px;
    text-align:center;
    margin-right:2%;
    margin-top:2%;
    display:inline-block;
}

.row {
    width:100%;
    margin-top:1%;
}

但是当我用IE打开它时，会发生一些奇怪的事情。第一个磁体（Some text的磁体）与其他磁体不对齐。当我删除文本并再次运行时，它又恢复正常。看起来它是将磁铁向下拉的文本。我认为这是非常不正常的，显然这不应该发生。

我也尝试使用谷歌浏览器，但结果与IE相同。

Answer 1

在.magnets Demo

中添加

.magnets {
    border:5px solid black;
    height:300px;
    width:300px;
    text-align:center;
    margin-right:2%;
    margin-top:2%;
    display:inline-block;
    overflow:hidden;

}

width:100%;

我测试了Chrome，Mozilla和IE中的输出，它运行良好。如果您从html, body移除static { System.out.print("x "); } }，则会提供类似的输出

Answer 2

或者您可以在vertical-align: bottom;课程上设置.magnet。

编辑：

原因在于，因为.magnet分类块被重新定义为内联块，所以块被视为文本，因此默认情况下它们的底部都在基线上排列。 / p>

每当其中一个块包含文本时，默认的＆＃34;锚点＃34;基线从块本身的底部移动到块内的文本，块本身只是成为文本周围的一种边界而没有有意义的锚点。要强制块与其兄弟节点重新对齐，您需要通过在块上显式定义vertical-align: bottom;来覆盖此默认行为，以便它将对齐到基线的底部，就像文本将自己对齐到底部一样默认情况下为基线，因为文本也以内联方式显示。

关于此的更多内容：

/ EDIT

链接到结果：http://jsfiddle.net/e1og1m8v/或本地可运行的代码段以进行详细说明：

＆＃13;

html, body {
    background:#f8e4e4;
    font-family:'Bad Script';
    font-size:medium;
    text-align:center;

    width:100%;
}

.magnets {
    border:5px solid black;
    height:100px;
    width:100px;
    text-align:center;
    margin-right:2%;
    margin-top:2%;
    display:inline-block;
    vertical-align: bottom;
}

.row {
    width:100%;
    margin-top:1%;
}

＆＃13;

<body>
    <div id="banner-div">

    </div>
    <div class="row">

        <div class="magnets">
            Some text
        </div>

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>
    </div>

    <div class="row">

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>

        <div class="magnets">

        </div>
    </div>
</body>

＆＃13;

div中的文字似乎将div拉下来

2 个答案: