0

我一直在尝试为投资组合的主页获得如下布局；

这是工作示例：

在此处输入图像描述

如您所见，我不是一个出色的编码员：

HTML

<div class="row">
<div class="large-11 small-12 small-centered columns">

<div class="large-3 small-3 columns test tall-thin">
<div class="inner"><p>Tall Thin Image</p></div></div>

<div class="large-9 small-9 columns test long-thin">
<div class="inner"><p>Long Thin Image</p></div></div>

<div class="large-3 small-3 columns test short-fat">
<div class="inner"><p>Short Fat Image</p></div></div>

<div class="large-3 small-3 columns test short-fat">
<div class="inner"><p>Short Fat Image</p></div></div>

<div class="large-3 small-3 columns test short-fat">
<div class="inner"><p>Short Fat Image</p></div></div>

<div class="large-6 small-6 columns test short-medium">
<div class="inner"><p>Short Medium Image</p></div></div>

<div class="large-6 small-6 columns test short-medium">
<div class="inner"><p>Short Medium Image</p></div></div>
</div>
</div>

CSS

.test { border:1px solid #666;}

.tall-thin{ height: 470px;}
.long-thin{ height: 235px;}
.short-fat{ height: 235px;}
.short-medium{ height: 235px;}

.inner {
    background:#f8f8f8;
    margin: auto;
    position: absolute;
    top: 10px; left:10px; bottom: 10px; right:10px;

}

.inner p{
    position: relative;
    text-align: center;
    }

我在 Foundation 4 中使用同位素或砖石没有运气后这样做了，它适用于一种分辨率（1920px），但在调整大小时它是流动的，但由于需要为 div 指定高度，它根本无法缩放。

当我将图像作为背景或 src 时，它似乎添加了边距，然后只注意图像宽度进行缩放。我知道这是由于基础，但我不确定如何解决这个问题。

我的问题是我猜最好的方法？这甚至可以使用带有图像的基础网格吗？我不需要过滤或动态布局，因为我想要为首页创建的网格模式。我可以设置投资组合页面，因为它只有一个相等的方形网格，不会导致同位素的任何布局问题。

我基本上希望将其作为布局并使其具有响应性，以便在 768 像素以下的框是全宽的。

我感谢任何人的关注或任何建议！

谢谢，

杰森

4

1 回答 1

0

我通过创建媒体查询来解决这个问题，例如；

@media all and (min-width: 1201px) and (max-width:1400px) {

.tall-thin{ height: 450px;}
.long-thin{ height: 225px;}
.short-fat{ height: 225px;}
.short-medium{ height: 225px;}

}

结合 HTML 中的图像具有；

style="background-image:url(path to image); background-size:cover;"

我做了 10 个查询，所以它非常防弹。最小的媒体查询刚刚使 DIVS 跨越 100%，因此图像占据了整个列。Masonry、Isotope、Mason.js、Freetile 等无法在没有愚蠢间隙的情况下进行这种布局。虽然我的代码不漂亮，但没有人能回答，所以这是我能做的最好的。

于 2013-10-03T08:30:32.593 回答