我有2個格父DIV中這樣讓父div高度動態選擇小孩div嗎?
<div class='parent'>
<div class='title'></div>
<div class='content'></div>
</div>
內容類嵌套在父DIV。 如何使父母div高度動態化,以便它會選擇一個更大的子div。 我試圖做到這一點。但我的父母的div選擇一個孩子div更小
我有2個格父DIV中這樣讓父div高度動態選擇小孩div嗎?
<div class='parent'>
<div class='title'></div>
<div class='content'></div>
</div>
內容類嵌套在父DIV。 如何使父母div高度動態化,以便它會選擇一個更大的子div。 我試圖做到這一點。但我的父母的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>
謝謝,你的回答很有幫助。 –
很高興爲您提供幫助。 –
此外,還有與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>
定義樣式'.parent {隱藏:溢出;}' – Banzay
你的意思.parent {溢出:隱藏;} 我必須這樣使用。但不工作。 如果我使用它,內容div由父div分片。 –