Question

在我的HTML代码中，我有一些行和div，但是一个div在另一个之前显示，即使在代码之后也是如此。 div类别为“照片”的div之前显示为div类别为“联系人”的div 照片：https://imgur.com/a/Y8BGQIM

                <div class="photos">
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8 section-heading">Galerie Foto</div>
                </div>
                <div class="gallery">
                    <img src="background1.jpeg" alt="Cinque Terre">
                </div>

                <div class="gallery">
                    <img src="galerie1.jfif" alt="Forest">
                </div>

                <div class="gallery">
                    <img src="galerie2.jfif" alt="Northern Lights">
                </div>

                <div class="gallery">
                    <img src="galerie3.jfif" alt="Mountains">
                </div>
            </div>
            <div class="contact">
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8 section-heading">Contact</div>
                </div>
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-6 section-subheading">
                        <h1><br>
                            <br>
                        </h1>
                    </div>
                </div>
            </div>

以及我应用于div的css代码：

    .photos{
    width: 100%;
    position: absolute;
    background-color: black;
}

div.gallery {
    border: 1px solid #ccc;
    float: left;
}

.section-subheading:hover {
    border: 5px solid #d3ae87;
}

div.gallery img {
    width: 400px;
    height: 400px;}

.contact{
    width: 100%;
    position: absolute;
    background-color: black;
}

Answer 1

Hope deleting or commenting position: absolute in both the places will give you expected result. 
Give a try. to below CSS

  .photos{
    width: 100%;
    background-color: black;
}

div.gallery {
    border: 1px solid #ccc;
    float: left;
}

.section-subheading:hover {
    border: 5px solid #d3ae87;
}

div.gallery img {
    width: 400px;
    height: 400px;}

.contact{
    width: 100%;
    background-color: black;
}

Answer 2

如果没有其他样式位置，则绝对位置会将两个div放置在页面顶部。删除此处不需要的绝对位置，并向您的照片类和联系人类添加一个左浮点数，以使divs依次降序，因为您的图库中设置了一个左浮点数。

.photos{
width: 100%;
float:left;
background-color: green;
}

div.gallery {
border: 1px solid #ccc;
float: left;
}

.section-subheading:hover {
border: 5px solid #d3ae87;
}

div.gallery img {
width: 400px;
height: 400px;}

.contact{
width: 100%;
background-color: black;
float:left;
}

Div没有按顺序显示

2 个答案: