如何創建我的圖像網格成5行

我想讓這個畫廊分解成行？現在它是8行中的一行，但想把它分成一半。我會怎麼做？所以像4張圖像連續或5？謝謝大家:)下面是一個簡短的例子，因爲某些原因，html和css不得不像這樣標記css的開始。在編程方面仍然新鮮。如何創建我的圖像網格成5行

HTML

<section id="Photos">    
    <div class="col-md-12 gallery"> 
     <h1>Gallery</h1> 
     <ul id="photo-gallery"> 
      <li> 
       <a href="#"> 
        <img src="http://41.media.tumblr.com/0390d80d6c8cc4a7096033182a4bfe8a/tumblr_ndyvukSjNl1tubinno1_1280.jpg"> 
       </a> 
      </li> 
     </ul> 
    </div> 
</section>

CSS

#Photos{ 
    opacity: .88 
    padding: 0px 
} 
#Photos img{ 
    width: 10% 
    float: left 
    display: inline-block 
    margin: 5px 
    text-align: center 
} 
.gallery ul{ 
    list-style: none 
    margin: auto 
} 
#overlay{ 
    background: rgba(0,0,0, .8) 
    width: 100% 
    height: 100% 
    position: absolute 
    top: 0 
    left: 0 
    display: none; 
} 
#overlay img{ 
    margin: 10% auto 0 
    width: 550px 
    border-radius: 5px 
} 
#photos{ 
    width: 100% 
} 
#photo-gallery{ 
    width: 100% 
}

來源

2016-02-12 cwidlowski

我認爲你正在使用引導程序，所以我建議你看一看[引導電網的例子（https://getbootstrap.com/examples/grid/） – Trix

這裏有一個固定的CSS得到你想要的東西。

#Photos { 
    opacity: .88; 
} 

.gallery ul { 
    list-style: none; 
    padding: 0; 
} 

.gallery img { 
    width: 24%; 
    margin: .5%; 
    float: left; 
}

只要記住，ID選擇器（＃）必須在一個頁面上使用一次，如果我是你，我會寧可考慮使用類#photo-gallery。

BTW，歡迎堆棧溢出！

來源

2016-02-12 01:22:16

如何創建我的圖像網格成5行

回答

相關問題