Css 页面上有很多空白

所以我喜欢这样： 我的职位

位置：绝对位置

这就是我得到的 试图更改，但所有图像都崩溃了 在html中，我喜欢这样：

<div class="gallery">
    <article class = 'container1'>
        <figure class = 'cool'>
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/ Infinite_(1996),_by_Eminem.png"alt="" width="300px" height="300px" class="photos"></a>
        </figure>
        <figure class="cool">
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/Eminem_-_The_Slim_Shady_LP_CD_cover.jpg" width="300px" height="300px" alt="" class="photos"></a>
        </figure>
        <figure class="cool">
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/eminem-marshall-mathers.jpg" height="300px" width="300px" alt="" class="photos"></a>
        </figure>
        <figure class = 'cool'>
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/ Eminem_-_the_eminem_show.jpg" alt="" width="300px" height="300px" class="photos"></a>
        </figure>
        <article class = 'container2'></article>

        <figure class="cool2">
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/скачанные файлы.jpeg" width="300px" height="300px" alt="" class="photos"></a>
        </figure>
        <figure class="cool2">
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/20090506133342!Relapse_cover.jpg" width="300px" height="300px" alt="" class="photos"></a>
        </figure><br/>
        <figure class="cool2">
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/71HH7D7Z66L._SL1500_.jpg" width="300px" height="300px"  alt="" class="photos"></a>
        </figure><br/>
        <figure class = 'cool2'>
            <a href="http://www.eminem.com/" class="phorosRef">
                <img src="Photos/The_Marshall_Mathers_LP_2.png" alt="" class="photos"></a>
        </figure>
    </article>
    </div>

你能给我一些建议吗？ 我还可以显示我的css代码

---

见

带有

位置的元素：绝对

不会与其他元素发生碰撞，这意味着它们将堆叠在彼此的顶部。我猜你链接中的第二张图片就是你想要实现的。在这种情况下，我建议两个部分，用图像填充

<div class="section left">
   <img/>...
</div>
<div class="section right">
   <img/>...
</div>

这将在页面上创建两列，用图像填充它们，并将它们分别粘贴到左侧和右侧

.section {
    position: absolute;
    width: 250px;
    top: 0px;
}

.section.left {
    left: 0px;
}

.section.right{
    right: 0px;
}