Question

我正在开发一个项目，该项目使用同一个类的几个div，每个div包含一个未指定高度的单个子元素，可能是图像或iframe。我希望容器div正好是其子元素的高度，但默认高度比子高3px。

我有一个JSfiddle在http://jsfiddle.net/52me041n/2/展示了这个问题。

HTML：

<div class="outside">
    <img class="inside" id="pic" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fblogs.cisco.com%2Fwp-content%2Fuploads%2Fclouds.png&f=1" height="200px"/>
</div>
<br/>
<div class="outside">
    <iframe class="inside" width="420" height="315" src="//www.youtube.com/embed/VwTnyRHEZSQ" frameborder="0" allowfullscreen></iframe>
</div>

CSS：

.outside{
background-color: red;
}

我想知道是否可以使用CSS将div设置为适当的高度，如果没有，如何使用JS来设置它。

Answer 1

更新了小提琴。 http://jsfiddle.net/52me041n/3/

使用 -

img, iframe {
    display: block;
}

Answer 2

您需要为父div中的子项设置display属性。作为一种做法，我也总是将边距和垫设置为0。小提琴here

.outside > * {
    margin: 0;
    padding: 0;
    display: block;
}

Answer 3

图片与文字不在同一基线上。

添加

vertical-align:bottom;

到你的img css

fiddle

Answer 4

对于“我想知道是否可以用CSS将div设置到适当的高度，如果没有，如何用JS来改正它。” ＆lt; ==是的，

<div id="cntr">  </div>

css：

#cntr { width : 100px; height : 100px; overflow : hidden; }  /* overflow may have other values also like  hidden, auto, scroll

* /

Answer 5

试试这段代码。 Fiddle

.outside 
{
    background-color: red;
    display: block;
}
.outside img, iframe {
    float: left;
}

HTML-CSS div比孩子高3px

5 个答案: