爲媒體查詢的目的堆疊圖像

-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

爲媒體查詢的目的堆疊圖像

回答

相關問題