选择子div的父div高度动态？

Question

我在父div中有2个div，就像这样

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

现在我想让它像所示的图像： -

内容类嵌套在父div中。 如何使父div高度动态，以便选择一个较大的子div。 我试过这个。但我的父div选择一个子div为较小的

Answer 1

就我对你的问题的理解而言，你需要父母div根据你的内容div调整身高。

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

以下是您可以用于问题解决方案的代码段：

＆＃13;

＆＃13;

*{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); 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;