为媒体查询的目的堆叠图像

-3

简单的问题，一个简单的答案，我似乎无法弄清楚。为媒体查询的目的堆叠图像

我有6行2列的形式的12张图像，我希望被格式化为12列，当我的媒体查询突破240像素宽时，有1列。

这已经是一个令人难以置信的简单定位解决方案，我在12小时的服务器代码工作后完全失踪，但找不到解决问题的简单解决方案。

这里是我的标记（同样为所有12张）：

<div class="view view-first"> 
       <img src = "img/img1.jpg" alt="First Image"> 
       <div class="mask"> 
       <h2>Displayed 1st Image</h2> 
       <p>Image example</p> 
       <a href ="img1.html" class="info">Read More</a> 
      </div> 
     </div>

，这里是我的所有图像标记：

.view { 

    width: 300px; 
    height: 200px; 
    margin: 10px; 
    float: left; 
    border: 10px solid #fff; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    -webkit-box-shadow: 1px 1px 2px #e6e6e6; 
    -moz-box-shadow: 1px 1px 2px #e6e6e6; 
    box-shadow: 1px 1px 2px #e6e6e6; 
    cursor: default; 
    background: #fff url(../img/bgimg.jpg) no-repeat center center; 
} 
.view .mask,.view .content { 

    width: 300px; 
    height: 200px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
} 
.view img { 
    display: block; 
    position: relative; 
} 
.view h2 { 
    text-transform: uppercase; 
    color: #fff; 
    text-align: center; 
    position: relative; 
    font-size: 17px; 
    padding: 10px; 
    background: rgba(0, 0, 0, 0.8); 
    margin: 20px 0 0 0; 
} 
.view p { 
    font-family: Georgia, serif; 
    font-size: 16px; 
    position: relative; 
    color: #fff; 
    text-shadow:3px 3px 5px #000; 
    padding: 10px 20px 20px; 
    text-align: center; 
} 
.view a.info { 
    display: inline-block; 
    text-decoration: none; 
    padding: 7px 14px; 
    background: #000; 
    color: #fff; 
    text-transform: uppercase; 
    -webkit-box-shadow: 0 0 1px #000; 
    -moz-box-shadow: 0 0 1px #000; 
    box-shadow: 0 0 1px #000; 
} 
.view a.info: hover { 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 
}

我展示媒体查询，但现在它只是呼叫和最大宽度规定哈哈。

感谢您的热心帮助;）

来源

2015-07-20 Jason

我不明白。测试你的标记，它应该分成一个列。另外，为了测试，我必须将您的图像代码粘贴12次。你会张贴小提琴，更好地描述你遇到的问题吗？ –

如果你想使用你必须使用百分比宽度媒体查询。这样，在调整浏览器大小时，图像就会“缩放”。两行6个图像表示每个图像的宽度为50％。请注意，您必须考虑边距和填充。

你可以简单地把你的媒体查询从xxxx的大小给图像宽度100％。

来源

2015-07-20 22:41:52

为媒体查询的目的堆叠图像

回答

相关问题