创建响应式图像库

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

这是我到目前为止有：

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

<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>

，我有画廊的形象是：

来源

2017-07-27 Honey

你能使用引导程序？它几乎会默认为你照顾这一切 –

请告诉我在我的代码中使用Bootstrap的位置？ – Honey

http://getbootstrap.com/getting-started/，然后设置HTML：http：//getbootstrap.com/css/#images –

编辑：添加桌面视图以及。

总是把你的媒体查询结束，否则他们将被他们的后续选择器覆盖。
将您的非媒体查询.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/

移动视图图片：

桌面视图：

来源

2017-07-27 15:51:51 Syden

有一个问题你代码示例，它缺少</style>结束标记。此标签也在<html>之前，这是HTML5文档的根标签。

要回答你的问题，我会用一个响应CSS网，像Grillade来解决这个问题，首先是因为这将是无用的重建已经存在的东西，其次是因为你需要几乎网格无处不在在一个应用程序！

来源

2017-07-27 15:18:19 Gramatiik

创建响应式图像库

回答

相关问题