2

我有问题在图片上放置一些文本（在我的情况下是日期）。我尝试了许多这样的解决方案，并且奏效了。

但现在我想将我所有的博客文章缩略图显示为时间线，并在图片上写上日期。

所以其中一个问题是，如果我将文本放在图像上，那么下一张图片将转到下一行，我不希望这样。

以我的页面的详细信息为例：

  • 内容宽度：600px 或 200px 取决于屏幕或设备

  • 缩略图：100px * 100px

所以在600px的情况下，应该是每行6张图片；在 200px 的情况下应该是每行 2 张图片。

4

1 回答 1

1

FIDDLE下面是博客文章的无序列表，上面有日期。它们是链接，因为您称它们为“缩略图”——css 使用@media 规则作为图像网格的断点。链接上的 .block 类定义了每个图像的宽度，因为图像被设置为 100% 宽度并且仅由 .block 限制。.block 的高度是由图片的比例决定的，所以如果你放入不同尺寸的图片，就会破坏网格。

HTML

<ul class="time-line">

    <li><a class="block">
        <img alt="timeline image"
        src="http://placehold.it/400x400" />

        <h2>42/15/2013</h2>
    </a></li>

    <!-- repeat the list items as needed or insert a loop if you are using php or WP or something -->


</ul> <!-- .time-line -->

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

html, body {
    margin: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 80em;
}

.time-line {
    margin: 0; padding: 0;
    list-style: none;
}

h2 {
    position: absolute;
    top: 1em;
    left: 0;
    background-color: #f06;
    color: white;
}

.block {
    position: relative;
    display: inline-block;
    width: 50%;
    float: left;
    border: 1px solid black;
}

.block img {
    display: inline-block;
    width: 100%;
    float: left;
}


@media (min-width: 30em) {

    .block {
        width: 33.333333%;
    }

} /* ====================== */

@media (min-width: 40em) {

    .block {
        width: 25%;
    }

} /* ====================== */


@media (min-width: 50em) {

    .block {
        width: 20%;
    }

} /* ====================== */


@media (min-width: 60em) {

    .block {
        width: 16.666666%;
    }

} /* ====================== */
于 2013-06-06T16:26:28.137 回答