DEMO

Question

任何人都可以为我提供这种书架的响应式html / CSS。

删除了狡猾的图片链接

我试图在网上找到同样的架子，但他们没有善意/没有回应

那会查看更多/更少的按钮。

真的很感激，

Answer 1

以下是您的概念：

DEMO

<强> HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf hidden-md hidden-lg"></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf"></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf hidden-md hidden-lg"></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-4 col-md-2"><img src="http://placehold.it/150x190" class="img-responsive book"/></div>
        <div class="col-xs-12 shelf"></div>
    </div>
</div>

<强> CSS：

.book {
    padding: 15px 0 0 0;
    margin: auto;
}
.shelf {
    border-bottom: 30px solid #A1A194;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: -15px;
    z-index: -1;
}

如何运作

好的，所以当视口处于md尺寸以及您希望在书架上放置3本书时，您希望书架上有6本书。

因此，首先将所有书籍包装在一行中，因为您希望它们在不同的视口大小之间流畅地进行。每本书都将包含在一个包含列类的div中：col-xs-4（12/4 = 3）和col-md-2（12/2 = 6）。

接下来，您需要为货架添加div。你有一个非常简单的6-3设计，所以在每组三列之后添加一个带有类架子的div，并给它一个类名为shelf。架子需要将float设置为left以将其放入其余列div的流中，并且需要宽度为100％。因此，我们也会将col-xs-12类添加到shelf div中。这将确保架子跨越整个容器，而不管视口的大小（即从xs及以上）。

由于您希望在较大视口尺寸的书架上放置六本书，因此您必须隐藏md和lg视口中的所有其他书架。您可以使用Bootstrap中内置的响应实用程序类来执行此操作。将类hidden-md和hidden-lg添加到第一个和第三个shelf div。

对于架子上的每个book图片，您都希望为他们提供img-responsive类。这将使书籍与视口一起缩放，但绝不会超过图像的实际尺寸的100％。你也想把书放在他们的div中心，并在顶部给他们一点填充，这样他们就不会互相碰触，所以给他们另一堂课。我给了他们班book。 book班级top-padding 15px和margin设置为auto。

最后，您需要为您的架子设计样式。为了使图书显示在书架顶部，您可以将z-index设置为-1。由于col-xs-12，它已经具有相对位置。这将把shelf div放在其他一切之后。此时，您可以为background image使用shelf。如果您这样做，请务必同时向height课程添加shelf，以便它不会崩溃。

相反，我只是用了一点css技巧。我将border bottom设置为25px solid和transparent borders left and right。就像你在css中创建一个三角形一样，transparent left and right borders从bottom border的两侧垂下来，它会让人眼前一亮。我还移动了top position to -15px，这样架子就会延伸到书本下方。它看起来还不错，但我确定你可以打扮它以提供更逼真的外观，也许在架子的前后增加一些pseudo elements以增加尺寸。

需要书架的HTML / CSS样式

1 个答案:

DEMO