Div没有高度
Div没有高度
提问于 2017-01-19 07:33:00
我正在做一个简单的画廊。这只是一些减少照片的迷你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);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-19 07: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>
Stack Overflow用户
发布于 2017-01-19 07: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>然后将隐藏文本设置为不可见，如下所示：
.hiddentext {
visibility: hidden;
}这样，div将具有一定的高度，同时客观上是空的。也避免使用img标记。希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41731319
复制相关文章
相似问题
腾讯云开发者
