Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Div没有高度

Div没有高度
EN

Stack Overflow用户
提问于 2017-01-18 23:33:00
回答 2查看 1.2K关注 0票数 0

我正在做一个简单的画廊。这只是一些减少照片的迷你div,有8个。当你点击它们中的一个时,一个带有静态宽度(484px)和静态高度的大div出现,但我希望高度是自动的,但当我设置它时,div不会出现,只有一行边框和这个。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
      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);
    }
EN

回答 2

Stack Overflow用户

回答已采纳

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 function changePhoto(id) {
     var y = document.getElementById("baza_big_photo_img");
     var z = "/assets/galeria_images/" + id + ".jpg";
     y.src = z;
 }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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
EN

Stack Overflow用户

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

虽然其他人说要使用img标签,但我知道一种方法,可以在使用背景图像的同时做到这一点:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.hiddentext {
   visibility: hidden;
}

这样,div将具有一定的高度,同时客观上是空的。也避免使用img标记。希望这能有所帮助!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41731319

复制
相关文章
MySQL -- 全表扫描
-- db1.t有200GB mysql -h$host -P$port -u$user -p$pwd -e "select * from db1.t" > $target_file 查询数据 Inn
猿哥
2019/03/19
2.9K0
MySQL -- 全表扫描
MYSQL 查询优化之路-之DISTINCT全表扫描
背景:今天对一个20w的表做关联查询,创建各种索引,没有提高执行的效率,使用EXPLAIN检查,总是提示“Using temporary”全表扫描,这不是我想的。通过度娘,各种百度,是因为DISTINCT使用了全表扫描,现在特别记录下来。以背查验。
用户5640963
2019/07/25
4.3K1
MySQL中的全表扫描案例
这两天看到了两种可能会导致全表扫描的sql,这里给大家看一下,希望可以避免踩坑:
AsiaYe
2019/11/06
2.7K0
MySQL 全表扫描成本计算
全表扫描成本作为参照物,用于和表的其它访问方式的成本做对比。任何一种访问方式,只要成本超过了全表扫描成本,就不会被使用。
csch
2022/12/20
8970
索引 vs 全表扫描
索引是数据库的重要技术,本质是用空间换时间,或者放慢写入加速查询。通常我们会将索引和全表扫描来对比,并且一般都会觉得全表扫描很 low,真的是这样吗?
Apache IoTDB
2020/09/27
1.2K0
索引 vs 全表扫描
高水位线和全表扫描
   高水位线好比水库中储水的水位线,用于描述数据库中段的扩展方式。高水位线对全表扫描方式有着至关重要的影响。当使用delete 操作 表记录时,高水位线并不会下降,随之导致的是全表扫描的实际开销并没有任何减少。本文给出高水位线的描述,如何降低高水位线,以及高水 位线对全表扫描的影响。
Leshami
2018/08/14
5140
mysql中创建表实例全析及查询基本操作
create table cats( id int not null auto_increment, pid int not null default '0', name varchar(60) not null default '', desn text not null default '', primary key(id), index name(name, pid) )engine=InnoDB default character set=utf8;
闵开慧
2018/03/30
1.5K0
MySQL 分表查询
分表是一种数据库分割技术,用于将大表拆分成多个小表,以提高数据库的性能和可管理性。在MySQL中,可以使用多种方法进行分表,例如基于范围、哈希或列表等。下面将详细介绍MySQL如何分表以及分表后如何进行数据查询。
孟斯特
2023/10/19
1.1K0
MySQL 分表查询
MySQL单表查询
3.将取出的一条条记录进行分组group by,如果没有group by,则整体作为一组
changxin7
2019/09/10
17.9K0
mysql 查询表结构
use information_schema; select * from columns where table_name='NODES';
大数据工程师-公子
2019/03/14
9.1K0
使用索引快速全扫描(Index FFS)避免全表扫描的若干场景
2. Index FFS只能通过CBO(Index hint强制使用CBO)获得。
bisal
2022/12/01
7250
MySQL跨表查询
    跨表查询适用于两个及两个以上的表中关联信息的数据,通过联系查询到表的联系!
十月梦想
2018/10/11
9.3K0
MySQL跨表查询
MySQL单表查询
MySQL之单表查询 创建表 # 创建表 mysql> create table company.employee5( id int primary key AUTO_INCREMENT not null, name varchar(30) not null, sex enum('male','female') default 'male' not null, hire_date date not null, post varchar(50) not null,
星哥玩云
2022/08/18
6.3K0
MongoDB 定位 oplog 必须全表扫描吗?
MongoDB oplog 记录数据库的所有修改操作,除了用于主备同步;oplog 还能玩出很多花样,比如
MongoDB中文社区
2019/08/20
1.6K0
MongoDB 定位 oplog 必须全表扫描吗?
MySQL之单表查询、多表查询
having的语法格式与where一致,只不过having是在分组之后进行的过滤,即where虽然不能用聚合函数,但是having可以!
py3study
2020/01/16
22K0
Mysql避免全表update
在测试的时候忘记写where条件导致全表更新的话,可以收拾包袱走人了 下面这条语句可以开启检查,当没有加where时拦截下来 set sql_safe_updates=1; 关闭: set sql_safe_updates=0;
DH镔
2019/12/20
2.7K0
mysql-单表查询
mysql> create table employee(id int primary key auto_increment,name  varchar(20) not null,sex enum('male','female') not null default 'male',age int(3) unsigned not null default 28,hire_date date not null,post varchar(50),post_comment varchar(100),salary  double(15,2),office int,depart_id int);
py3study
2018/08/03
4.3K0
MySQL子查询,联结表
子查询:嵌套在其他查询中;执行顺序由里到外。子查询数目没有限制,如果要使用多层查询,注意写好缩进格式,不要出错。
小末快跑
2019/07/03
4.5K0
mysql分表+分页查询
我们都知道,数据量大了,都要对数据库进行分库分表。奈何一直对分表及分表查询没什么概念,这里先不讲那么多概念,先直接演示一个demo。我们直接上车,请坐稳扶好。
用户10002156
2023/08/07
4820
mysql分表+分页查询
点击加载更多

相似问题

Kafka producer在windows中不工作

24

在WSL上运行Kafka,在windows上制作producer

171

在pentaho中设置kafka producer

13

SSL confluent-kafka-dotnet librdkafka kafka SSL

12

在oracle DB中使用Kafka Producer

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文