Question

我正在尝试在移动设备上创建一个响应式图片库，例如Instagram。我想要宽3张图片，左右边距没有。我怎样才能做到这一点？

这是我到目前为止所做的：

＆＃13;

@media (max-width: 480px) {
    .portfolio-list li {
        width:33.3333%;
        height: 100px;
        border: 3px solid white;
        margin: -3px;
    }

    .portfolio-container,
    .portfolio-list {
        margin-right: 0 ;
        margin-left:0;
        margin-top:10px;
    }

    .portfolio-list {
        width: 100%;
    }
}

portfolio-list {
    list-style: none;
}

.portfolio-list li {
    position: relative;
    display: block;
    float: left;
}

.portfolio-list li img {
    display: block;
    width: 100%;
    margin:0;
    vertical-align: top;
    height: 100%;
}

＆＃13;

<container class="portfolio-container text-center">
    <ul class="portfolio-list" style="margin:0 auto">
        <li style="margin:0 auto">
            <a href="#"><img src="{{$img['image']}}"></a>
        </li>
    </ul>
</container>

＆＃13;

我所拥有的画廊的图像是：

Answer 1

您的代码示例存在问题，但缺少</style>结束标记。此标记也位于<html>之前，它是 HTML5 文档的根标记。

要回答您的问题，我会使用响应式CSS网格，例如 Grillade 来解决此问题，首先是因为重新创建某些内容毫无用处已经存在，其次是因为你在应用程序中几乎无处不在的网格！

Answer 2

编辑：还添加了桌面视图。

始终将您的媒体查询放在最后，否则他们将被以下选择器覆盖。
将您的非媒体查询.portofolio-list切换为flexbox。
您在portfolio-list所在的list-style: none遗漏了一个点。

基本上我添加了以下内容：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

重置浏览器边距并防止框崩溃。

在margin: -3px;上评论.portfolio-list li，以避免破坏确切的居中位置。

<强> https://jsfiddle.net/ujrruyxq/7/

移动视图中的图片：

桌面视图：

创建响应式图像库

2 个答案: