子divを選択する親divの高さを動的にしますか？

Question

は、私は今、私が示したこの画像のようにそれを作りたい、この

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

のような親のdiv内の2つのdiv要素を持っている： -

コンテンツクラスは親divの中にネストされています。 親divの高さを動的にして、子divを1つ選択するようにする方法。 私はそれをしようとしました。私の親のdivは、より小さい子divを1つ選択してください

Answer 1

あなたの質問を理解する限り、あなたはあなたのコンテンツdivに従って高さを調整する親divが必要です。

親divの末尾にクラスclearfixを持つ余分なdivを追加するだけで済みます。以下は

あなたはあなたの問題の解決のために使用することができ抜粋です。

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

Answer 2

さらに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>