Question

我正在尝试编写仅限CSS的全屏网格，这是我目前的代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Only Full-Screen Grid</title>
    <style>
    body { margin: 0; }
    .grid {
        line-height: 0;
    }
    .grid img {
        width: 20% !important;
        height: auto !important;
        vertical-align: top;
        position: relative;
    }
    .grid h2 {
        position: absolute;
        top: 0;
        left: 0;
    }
    </style>
</head>
<body>
    <div class="grid">
        <?php
        for ($i = 1; $i <= 20; $i++) {
            $hex = str_pad(dechex(mt_rand(0, 0xffffff)), 6, '0', STR_PAD_LEFT);
            $hex2 = str_pad(dechex(mt_rand(0, 0xffffff)), 6, '0', STR_PAD_LEFT);
            echo "<img src=\"http://placehold.it/640x480/" . $hex . "/" . $hex2 . "/\">";
            echo "<h2>Hello, World</h2>";
        }
        ?>
    </div>
</body>
</html>

我对我的代码感到满意，直到我尝试在图像顶部添加文本...设置图像的相对位置，标题的绝对位置实际上将h2堆叠在顶部 - 屏幕的左侧，我想在每张图像的顶部h2。

Answer 1

我认为这可行:(未经测试）。不是最好的但是如果你有父相关的位置，那么绝对位置内的任何东西都可以轻松定位..我认为它不适用于你的原因是h2（div与绝对位置）不包含在div内位置..

   <div class="grid">
            <?php
            for ($i = 1; $i <= 20; $i++) {
                $hex = str_pad(dechex(mt_rand(0, 0xffffff)), 6, '0', STR_PAD_LEFT);
                $hex2 = str_pad(dechex(mt_rand(0, 0xffffff)), 6, '0', STR_PAD_LEFT);
    echo "<div style=\"position:relative\">";            
    echo "<img src=\"http://placehold.it/640x480/" . $hex . "/" . $hex2 . "/\">";
                echo "<div style=\"position:absolute\"><h2>Hello, World</h2></div>";
            }
            ?>
          </div>
   </div>

你需要根据需要设置h2的位置..

Answer 2

您需要将每个图像和关联的h2包装在一个具有位置：relative

的单独div中

JSfiddle Demo

<强> CSS

body {
    margin: 0;
    padding:0;
}
.grid {
    line-height: 0;
    width:100%;
    font-size: 0; /* removes whitespace */

}
.grid img {
    max-width: 100%;
    height: auto;


}
.grid h2 {
    text-align: center;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-size:1rem; /* rest font-size */
}
.grid > div {
    width: 20%;
    display:inline-block;
    position: relative;
}

.grid > div img {
    display: block;

}

Answer 3

这就是我解决问题的方法。我已经利用div来叠加它们。

这是我使用的HTML：

<div class="grid">
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/925e14/325111/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/0524f3/ea01a8/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/f688c8/ac9644/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/9b7093/27948e/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/78e101/2d96ab/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/0b959c/b9a02f/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/c7cea9/18c3a6/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/684c16/dcccdf/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/47352f/be1834/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/b8f72a/fa074f/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/13ccdf/9c765d/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/71d393/15b698/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/e080dd/a126a5/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/dbf7be/9264d4/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/3b2f96/dea622/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/0cfab0/4b2fd8/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/d27c64/1f4964/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/8f1726/43b8ee/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/12421f/db44c1/" />
    </div>
</div>

并按如下方式编辑CSS：

body {
    margin: 0;
    padding:0;
}
.grid {
    line-height: 0;
    width:100%;

}
.grid img {
    width: 100%;
    height: 200px !important;


}
.grid h2 {
    display:inline-block;
}
.grid > div {
    width: 32%;
    display:inline-block;
}

您可以在此处看到：http://jsfiddle.net/88RYw/

这将在调整窗口大小时拉伸div和图像。或者，如果您不希望在浏览器窗口增加时想要更多的div来堆叠，那么您将不得不修改.grid＆gt; div就是这样：

.grid > div {
    width: 200px;
    display:inline-block;
}

当图像根据浏览器窗口宽度叠加时，这看起来非常好。

请在此处查看：http://jsfiddle.net/gxzr3/

希望这有帮助!!!

将位置与内联块元素组合以将文本悬停在图像上

3 个答案: