Question

我创建了一个div id =＆＃34; A＆＃34;和div id =＆＃34; B＆＃34;并将后一个div放在div A中.Div A有一个background-color属性，但是div里面显示为没有A＆＃39; s背景颜色的独立div。我认为div中的div将采用父div的属性。相反，div A在浏览器上显示0高度。下面的div使用相同的结构，只是命名不同：＆＃39; AboutPictures＆＃39;（A）和＆＃39; ya＆＃39;（B）

{{1}}

CSS：

{{1}}

Answer 1

由于您的#ya div已浮动，因此父div只会看到空内容。您需要clear div #AboutPictures div，方法是应用clear: both样式。请参阅：What is a clearfix?

工作示例：

<div id="AboutPictures">
    <div id="ya">
        <img style='border:5px solid #F00' src="https://placehold.it/350x150">
        <div style="clear: both;"></div>
        <figure>
            <figcaption>Hello I am Edward</figcaption>
        </figure>
    </div>
    <div style="clear: both;"></div>
</div>

Answer 2

嘿，有不同的可能性来解决这个问题：

您可以在外部div（#AboutPictures）

float: right / left;

或者您可以将其设置为display: inline-block;

看到这个小提琴：https://jsfiddle.net/8j2zpfdg/

另一个SO答案作为参考：How to make div not larger than its contents?

在div 0高度内的div

2 个答案: