別のdivの周りに浮かんでdivを伸ばした後

私は動的な高さと30％の幅で右divを持っています。目的は、紫色の要素を右のdivの周りに浮動させ、残りのスペースを終了した後に取ることです。これはCSSでのみ可能ですか？別のdivの周りに浮かんでdivを伸ばした後

.container { 
 
     height: 500px; 
 
     width:100%; 
 
    } 
 
    
 
    .yellow { 
 
     width: 30%; 
 
     background: yellow; 
 
     float: right; 
 
     margin: 5px; 
 
    } 
 
    
 
    .purple { 
 
     background:purple; 
 
     height: 40px; 
 
     margin: 5px; 
 
     width:100%; 
 
     float:left; 
 
    }

<html> 
 
    <div class="container"> 
 
     <div class="yellow"> some content here <br/><br/><br/> some content here </div> 
 
    
 
     <div class="purple"> </div> 
 
     <div class="purple"> </div> 
 
     <div class="purple"> </div> 
 
     <div class="purple"> </div> 
 
    </div> 
 
    </html>

出典

2017-07-26 Kertis van Kertis

あなたは紫色のボックスを浮動避け、overflow: hiddenでそれらblock formatting contexts作る場合、あなたは、あなたが望む結果を得るでしょう。

基本的に浮動要素によって、紫色のボックスに幅を100％に設定しているため、フローティング要素が互いをクリアする原因となります。紫色のボックスをドキュメントの通常の流れのままにして、ブロックフォーマットのコンテキストを使用して右の浮動要素に基づいて変形させると、結果が得られます。

.container { 
 
     height: 500px; 
 
     width:100%; 
 
    } 
 

 
    .yellow { 
 
     width: 30%; 
 
     background: lavender; 
 
     float: right; 
 
     margin: 5px; 
 
    } 
 

 
    .purple { 
 
     background: lightblue; 
 
     height: 40px; 
 
     margin: 5px; 
 
     overflow:hidden; 
 
    }

<div class="container"> 
 
    <div class="yellow"> some content here <br/><br/><br/> some content here </div> 
 

 
    <div class="purple"> </div> 
 
    <div class="purple"> </div> 
 
    <div class="purple"> </div> 
 
    <div class="purple"> </div> 
 
</div>

いくつかの追加の読書：https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

出典

2017-07-26 16:05:27 Don

別のdivの周りに浮かんでdivを伸ばした後

答えて

関連する問題