问Div没有高度
EN

Stack Overflow用户

提问于 2017-01-18 23:33:00

回答 2查看 1.2K关注 0票数 0

我正在做一个简单的画廊。这只是一些减少照片的迷你div，有8个。当你点击它们中的一个时，一个带有静态宽度(484px)和静态高度的大div出现，但我希望高度是自动的，但当我设置它时，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，宽度为484px，高度为自动的照片应该出现，但不会-是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);
    }

html

css

音视频体验馆免费体验试用

一站式·全方位体验音视频产品，所见即所得，30分钟即可上线同款能力

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-18 23:45:07

div高度为0的原因是块元素默认高度为0，如果没有指定的高度，只能与其中的内容一样高。由于您的div没有内容，因此高度为0。

要在该div中使用img标记，这将为其提供与img标记匹配的内容和高度，请向该div添加一个img标记，为该标记指定一个ID，以便您可以使用JS轻松地将其作为目标，并在JS中设置src。

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

.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;
}

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

票数 0

Stack Overflow用户

发布于 2017-01-18 23:55:42

虽然其他人说要使用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>