試圖在不影響動畫的情況下將圖片放置在網頁上的網格中

得到了此問題，我希望圖片在網頁上的網格中佈局，但動畫似乎已受到影響我試過了。例如橫幅可以下車中心或獲得比像大...試圖在不影響動畫的情況下將圖片放置在網頁上的網格中

這裏是我到目前爲止已經有一個小提琴：

所以，我終於拿到了圖像居中，但在一個醜陋的專欄中，恰好排成一條直線。

我想至少有兩個圖像在頂部和兩個在底部與每個圖像之間的空間。有任何想法嗎？

這裏的HTML：

<div id="content"> 
    <div id="main"> 
       <div class="view view-first"> 
        <img src="http://placehold.it/399" /> 
        <div class="mask"> 
         <h2>Item 1</h2> 
         <br> 
         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> 
         <br> 
         <a href="#" class="info">Buy now</a> 
        </div> 
       </div> 
       <div class="view view-first"> 
        <img src="http://placehold.it/399" /> 
        <div class="mask"> 
         <h2>Item 1</h2> 
         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> 
         <a href="#" class="info">Read More</a> 
        </div> 
       </div> 
       <div class="view view-first"> 
        <img src="http://placehold.it/399" /> 
        <div class="mask"> 
         <h2>Item 1</h2> 
         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> 
         <a href="#" class="info">more info</a> 
        </div> 
       </div> 
       <div class="view view-first"> 
        <img src="http://placehold.it/399" /> 
        <div class="mask"> 
         <h2>Item 11</h2> 
         <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> 
         <a href="#" class="info">Have a look</a> 
        </div> 
       </div> 
       </div>  
    </div> 
    </div> 
    </div>

以及一些CSS的：

#content { 
    clear:both; 
    margin: 0 auto; 
    width: 1000px; 
    padding: 35px 0 35px 0; 

} 

#main { 
    clear:both; 
    margin: 0 auto; 
    width: auto; 
    text-transform: uppercase; 
} 

/*----------- grid ----------*/ 

.view { 
    width: 399px; 
    height: 266px; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
} 
.view .mask,.view .content { 
    width: 399px; 
    height: 266px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
} 

/*----------- photos ----------*/ 
.view img { 
    display: block; 
    position: relative; 
    width: 399px; 
    height:auto; 
    margin:0 auto; 
}

來源

2014-02-05 Michael G

如果明白你的問題是正確的：加text-align: center即可。 content

#content { 
    ... 
    text-align: center; 
}

浴液上view-first和clear:right他們的每一秒：

div.view-first { 
    float: left; 
    margin: 4px; 
} 
div.view-first:nth-child(2n+0) { 
    clear: right; 
}

分叉的小提琴 - >http://jsfiddle.net/59Hjc/（更新，完全忘記了保證金）

來源

2014-02-05 13:48:35 davidkonrad

感謝David，#content {text-align：center;}完美無缺。 –

（EDIT）

在這裏，我做了一個快速/簡單的變化

我將課程更改爲此：

.view { 
    width: 399px; 
    height: 266px; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    margin-top: 5px; 
    display: inline-block; 
    margin-right: 5px; 
}

你想試試嗎？ http://jsfiddle.net/fnGwP/6/

來源

2014-02-05 13:44:00 MCSI

ya！這很接近，但我希望在水平圖像之間留出一些空間，並讓圖像停留在頁面的中心。看起來他們仍然在左邊對齊。 –

完美！我已經更改了代碼。祝你好運 – MCSI

感謝MCSI，我需要添加#content {text-align：center;}才能得到我想要的。 –

OK，得到看起來像我想要的東西我把CSS更改爲：

#content { 
    clear:both; 
    margin: 0 auto; 
    width: 1000px; 
    padding: 35px 0 35px 0; 
    text-align: center; 

} 

#main { 
    clear:both; 
    margin: 0 auto; 
    width: auto; 
    text-transform: uppercase; 
} 

/*----------- grid ----------*/ 

.view { 
    clear:both; 
    width: 324px; 
    height: 216px; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    margin-top: 5px; 
    display: inline-block; 
    margin-right: 5px; 
} 
.view .mask,.view .content { 
    width: 324px; 
    height: 216px; 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
}

感謝MCSI和davidkonrad

來源

2014-02-05 18:22:33

試圖在不影響動畫的情況下將圖片放置在網頁上的網格中

回答

相關問題