让父div高度动态选择小孩div吗？

我有2个格父DIV中这样让父div高度动态选择小孩div吗？

<div class='parent'> 
    <div class='title'></div> 
    <div class='content'></div> 
</div>

现在我想让它像这样显示图像： -

内容类嵌套在父DIV。如何使父母div高度动态化，以便它会选择一个更大的子div。我试图做到这一点。但我的父母的div选择一个孩子div更小

来源

2017-01-10 Youngz ie

定义样式'.parent {隐藏：溢出;}' – Banzay

你的意思.parent {溢出：隐藏;} 我必须这样使用。但不工作。如果我使用它，内容div由父div分片。 –

据我的理解你的问题，你需要你的父div有高度根据你的内容div调整。

你只需要在父div的末尾添加一个额外的class class clearfix。

以下是你可以使用你的问题的解决方案的片断：

*{box-sizing:border-box;} 
 
.title, .content, .parent{ 
 
padding:10px; 
 
    border: 1px solid #000; 
 
} 
 
.clearfix, .clearfix:before, .clearfix:after{ 
 
    clear:both; 
 
} 
 
.clearfix:before, .clearfix:after{ 
 
    content:""; 
 
} 
 
.title{ 
 
    float:left; 
 
    height:100px; 
 
    width:30%; 
 
} 
 
.content{ 
 
    float:left; 
 
    height:200px; 
 
    margin-left: 10px; 
 
    width: calc(70% - 10px); 
 
}

<div class='parent'> 
 
    <div class='title'></div> 
 
    <div class='content'></div> 
 
    <div class="clearfix"></div> 
 
</div>

来源

2017-01-10 07:20:28

谢谢，你的回答很有帮助。 –

很高兴为您提供帮助。 –

此外，还有与display:inline-block的解决方案。父元素获取display:inline-block;，标题float:left;和内容float:right;。

插入百分比作为宽度和填充使得事物响应。

.parent { 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    padding: 3%; 
 
} 
 
.content { 
 
    border: 1px solid black; 
 
    float: right; 
 
    width: 63%; 
 
    padding-top: 20px; 
 
    padding-left: 5px; 
 
} 
 
.title { 
 
    border: 1px solid black; 
 
    float: left; 
 
    text-align: center; 
 
    width: 30%; 
 
    height: 60px; 
 
    padding-top: 20px; 
 
}

<div class='parent'> 
 
    <div class='title'>title</div> 
 
    <div class='content'>content content content content content content content content content content content content content content content content content content content content</div> 
 
</div>

来源

2017-01-10 08:59:04 Gehtnet

让父div高度动态选择小孩div吗？

回答

相关问题