gpt4 book ai didi

html - 额外的高度添加到 div,但从哪里?

转载 作者:行者123 更新时间:2023-11-28 00:03:06 25 4
gpt4 key购买 nike

我在“.thumbHolder”容器中有四个“.thumbnail”对象 (234 x 176),它们应该与主“.row”容器齐平。

但是,在我的浏览器(Chrome 31.0.1650.57m 和 Firefox 25)中呈现的“.row”高度增加了 4 个像素的高度。 “.row”应该是 height:176px 但被渲染为 181px。 CSS 应该允许我不需要指定高度,对吗?我有动态数量的内容,不希望运行 jQuery.css("height") 更新来删除这四个额外的像素。

将 font-size:0 应用于我的 CSS 的 .row 类解决了这个问题。但是没有实际的 float 文本,因此该解决方案感觉很老套。另一个解决方案是将 DOCTYPE 从“html”更改为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">但是……嗯,难道 Chrome 不应该支持简单、简单、简单的 html 元素作为 HTML5 文档类型吗?

我已经将“.row”背景增加了 20 像素宽,因此,如果解决了额外的高度问题,我仍然可以看到粉红色的“.row”背景颜色并确认高度是我希望的是。

我的 HTML(我也试过在没有任何格式中断的情况下使所有 div 内联):

<body>
<div class="row">
<div class="thumbHolder">
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
</div>
</div>
</body>

我的 CSS:

* {
margin: 0;
padding: 0;
border: 0;
}

body {
background-color: #94b7d2;
}

.row {
width:956px;
margin: 0 auto;
background-color: #f00fff;
}

.thumbHolder {
display:inline-block;
margin: 0 auto;
}

.thumbnail {
width: 234px;
height: 176px;
display:inline-block;
float:left;
}

.thumbnail img{
width:234px;
height:176px;
}

这是给你的 jsFiddle:http://jsfiddle.net/8gWWx/

什么鬼?这是使用液体施胶应该能够做的最简单的事情,对吧?没有什么复杂的。我已经验证了我的 CSS 和 HTML,除了缺少属性外,它是可靠的。

为任何解决方案干杯......我已经用这个解决方案难住了我的同事!

干杯!

最佳答案

.thumbHolderinline-block,因此有用于字符下行的空间。将其设置为 block 并开心。

http://jsfiddle.net/isherwood/8gWWx/4/

关于html - 额外的高度添加到 div,但从哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20252848/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com