Question

我正在做一个简单的画廊。它只是一些减少照片的迷你div，其中有8个。当你点击其中一个时，一个大的div出现静态宽度（484px）和静态高度，但我希望高度为AUTO但是，当我设置它时，div不会出现，只有一行边框而且只是此

<div class="box_1">
    <div class="box_1_header">Header</div>
    <div class="box_1_content">
        <div class="baza_big_photo"></div>
        <div class="br2"></div>
        <div class="baza_zdjecia" id="tn_galeria01" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria02" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria03" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria04" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria05" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria06" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria07" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria08" onclick="changePhoto(this.id)"></div>
    </div>
</div>

一些传说：我的大div，其中宽度为484像素，高度为自动的照片应该显示，但不是baza_big_photo，带有可点击图片的小div是baza_zdjecia。

CSS：

.baza_big_photo {
   width: 484px;
   height: auto;
   box-sizing: border-box;
   border: 1px solid black;
   display: block;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100% 100%;
   margin: 3px;
   overflow: hidden;
}
.baza_zdjecia {
   width: 118px;
   height: 86px;
   margin: 2px;
   box-sizing: border-box;
   border: 1px solid black;
   overflow: hidden;
   float: left;
}

JS：

      function changePhoto(id) {
        var y = document.getElementById("baza_big_photo");
        y.style.display = "block";
        var z = "url('./assets/galeria_images/" + id + ".jpg')";
            y.style.backgroundImage = z;
            console.log(z);
    }

Answer 1

div为0高度的原因是块元素默认为0高度，没有指定高度，只有它们内部的内容高。由于你的div没有内容，因此高度为0。

要在该div中使用img代码，这将为其提供内容和与img代码匹配的高度，请在div中添加img代码，为代码添加一个ID，这样你就可以用JS轻松地定位它，并像你一样在你的JS中设置src。

＆＃13;

 function changePhoto(id) {
     var y = document.getElementById("baza_big_photo_img");
     var z = "/assets/galeria_images/" + id + ".jpg";
     y.src = z;
 }

＆＃13;

.baza_big_photo {
   width: 484px;
   height: auto;
   box-sizing: border-box;
   border: 1px solid black;
   display: block;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 100% 100%;
   margin: 3px;
   overflow: hidden;
}
.baza_zdjecia {
   width: 118px;
   height: 86px;
   margin: 2px;
   box-sizing: border-box;
   border: 1px solid black;
   overflow: hidden;
   float: left;
}

＆＃13;

<div class="box_1">
    <div class="box_1_header">Header</div>
    <div class="box_1_content">
        <div class="baza_big_photo"><img src="" id="baza_big_photo_img"></div>
        <div class="br2"></div>
        <div class="baza_zdjecia" id="tn_galeria01" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria02" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria03" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria04" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria05" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria06" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria07" onclick="changePhoto(this.id)"></div>
        <div class="baza_zdjecia" id="tn_galeria08" onclick="changePhoto(this.id)"></div>
    </div>
</div>

＆＃13;

Answer 2

虽然其他人说使用img标签，但我知道在使用背景图像的同时做到这一点：

<div>

    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>
    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>
    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>
    <p class = "hiddentext">Some Text Some Text Some Text Some Text Some Text</p>

</div>

然后将隐藏文本设置为不可见，如下所示：

.hiddentext {
   visibility: hidden;
}

这样，div在客观上是空的时候会有一些高度。还避免使用img标签。希望有所帮助！

Div没有高度

2 个答案: