CSSは2つの等価の列を動的高さ

Question

私の質問はどのようにこの出力を達成するために各要素を配置するのですか？各アイテムは動的に生成されることに注意してください。フレームワークの制限により、flexはサポートされていません。あなたは手動ではなく、それらをフロートする必要があります。このページに親要素に追加することはできませんということで

.col { 
 
    display: block; 
 
    float: left; 
 
} 
 

 
.w50 { 
 
    width: 50% 
 
}

<div class="col"> 
 

 
    <div class="col w50" style="background-color: #aaa"> 
 
    <div> 
 
     <strong>Item 1</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Bacon ipsum dolor amet buffalo prosciutto doner biltong kevin porchetta, spare ribs meatloaf shankle. </span> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="col w50" style="background-color: #bbb"> 
 
    <div> 
 
     <strong>Item 2</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Hello world</span> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="col w50" style="background-color: #ccc"> 
 
    <div> 
 
     <strong>Item 3</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Sample</span> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="col w50" style="background-color: #ddd"> 
 
    <div> 
 
     <strong>Item 4</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Hello world</span> 
 
    </div> 
 
    </div> 
 

 

 
</div>

Answer 1

。 スタックに移動させるには、2番目の行（3番目の行）の最初の要素にclear: bothを適用します。

あなたの最後の仕事は、それらが同じ高さになるようにすることです。このためには、親コンテナcolのoverflowがhiddenである間に任意のマージンとパディングを適用します。特に、この技術のためのクレジットはhere

.col { 
 
    overflow: hidden; 
 
} 
 

 
.w50 { 
 
    width: 50%; 
 
    margin-bottom: -500px; 
 
    padding-bottom: 500px; 
 
    float: left; 
 
} 
 

 
.w50:nth-of-type(3n) { 
 
    clear: both; 
 
}

<div class="col"> 
 
    <div class="col w50" style="background-color: #aaa"> 
 
    <div> 
 
     <strong>Item 1</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Bacon ipsum dolor amet buffalo prosciutto doner biltong kevin porchetta, spare ribs meatloaf shankle. </span> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="col w50" style="background-color: #bbb"> 
 
    <div> 
 
     <strong>Item 2</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Hello world</span> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="col w50" style="background-color: #ccc"> 
 
    <div> 
 
     <strong>Item 3</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Sample</span> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="col w50" style="background-color: #ddd"> 
 
    <div> 
 
     <strong>Item 4</strong> 
 
    </div> 
 
    <div> 
 
     <span>Remarks : Hello world</span> 
 
    </div> 
 
    </div> 
 
</div>