Question

我有问题在图片上放置一些文字（在我的情况下是一个日期）。我尝试了许多解决方案like these，这很有效。

但现在我希望将所有博客文章缩略图显示为时间轴，并在图片上显示日期。

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

以我的页面详情为例：

内容宽度：600px或200px取决于屏幕或设备
缩略图：100px * 100px

因此在600px的情况下，每行应该是6张图片;在200px的情况下，每行应该有2张图片。

Answer 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%;
    }

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

CSS文字图片

1 个答案: