如何设置div高度以匹配子div?

时间:2022-08-01 20:35:55

I've create a div container width some child div's in it. The child displays pictures via img tags with percentage widths.

我创建了一个div容器宽度,其中包含一些子div。孩子通过img标签显示图片,宽度为百分比。

When I inspect the height of the parent div, my browser says it is 0px, even though the pictures inside the child div have a non-zero height.

当我检查父div的高度时,我的浏览器说它是0px,即使子div中的图片具有非零高度。

How can I set the parent div automatically to the height of the greatest child when I only work width percent? This must work too, when I tweak the image sizes in the browser manually.

当我只处理宽度百分比时,如何将父div自动设置为最大孩子的高度?当我手动调整浏览器中的图像大小时,这也必须有效。

I tried to set the height and width of the parent div with jQuery, but it works only once and not dynamically. When I reload the page, the function will set the height of 16px.

我试图用jQuery设置父div的高度和宽度,但它只能运行一次而不是动态的。当我重新加载页面时,该函数将设置16px的高度。

2 个解决方案

#1


I am not sure if I understood your question correctly, but is this what you're looking for?

我不确定我是否理解你的问题,但这是你在寻找什么?

HTML:

<div class="out">
    <div class="in"></div>
</div>

CSS:

.out {
    background-color: blue;
}
.in {
    background-color: green;
    height: 50px;
    width: 50%;
}

http://jsfiddle.net/xm2gwdjd/

#2


Try this css with Parent div

用父div尝试这个css

overfolw:auto;

For Parent div

对于父级div

dispaly:table;

For child div :

对于儿童div:

display:table-row;

#1


I am not sure if I understood your question correctly, but is this what you're looking for?

我不确定我是否理解你的问题,但这是你在寻找什么?

HTML:

<div class="out">
    <div class="in"></div>
</div>

CSS:

.out {
    background-color: blue;
}
.in {
    background-color: green;
    height: 50px;
    width: 50%;
}

http://jsfiddle.net/xm2gwdjd/

#2


Try this css with Parent div

用父div尝试这个css

overfolw:auto;

For Parent div

对于父级div

dispaly:table;

For child div :

对于儿童div:

display:table-row;