Question

我觉得这真的很傻，但是我找不到太多信息而且我遇到了一个奇怪的问题。基本上，我有以下html：

<div class='one'>
    <div class='two'>
        <img src="someImage" class="img-responsive teamPhoto"/>
        <p>Some text</p>
        <p>Some text
    </div>
</div>

足够简单。我遇到的问题是，当我查看div 1和2的高度时，高度仅等于div 2中的嵌套图像。

根本不包括'P'元素，当我在浏览器中检查时，我可以看到两个div只延伸到图像的底部。

我在这里想到的是，我的段落元素被排除在div高度之外？

Answer 1

我没有看到你的CSS，但我很确定'one'和'two'div的样式有问题。如果您检查Chrome开发工具中的两个div元素，请尝试禁用两个div元素的所有样式，它应该可以工作。

Answer 2

<div class='one'>
    <div class="two" style="position: absolute;background-color: #ccc;">
        <div>
            <img src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg" class="img-responsive teamPhoto">
            <p>Some text</p>
            <p>Some text</p>
        </div>
    </div>
</div>

我将图片和p标记放在另一个div中以解决您的问题。 div one仍然有height = 0但

<p>元素未包含在包含</p> <div>的高度中

2 个答案: