Question

我想让这个画廊分成几排？现在它是一排8，但想把它分成两半。我该怎么办？那么像4个图像到一行还是5个？谢谢大家:)下面是一个简短的例子，html和css由于某种原因必须标记css的开头。编程时仍然很新鲜。

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

Answer 1

这是一个固定的CSS来获得你想要的东西。

#Photos {
    opacity: .88;
}

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

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

请记住，ID选择器（＃）必须在页面中使用一次，如果我是你，我宁愿考虑使用#photo-gallery类。

BTW，欢迎使用Stack Overflow！

如何将我的图像网格创建为5行

1 个答案: