セクションでは、私はそれらの下に3つのセクションが持つこれらの三つの部分を持って

Question

上記1の真下に行かないと私は直接の上のものを追跡するには、以下のものにしたいと思います。例えば、このcodepenでは、下の2番目のセクションは上記の2番目のセクションの直下にはありません。上記の最初のセクションはもう少し長くなっているためです。

codepen.io/anon/pen/apEQRE

はそれを修正する方法はありますか？

Answer 1

ない簡単にHTMLの構造を変更せずに。 inline-blockと表示するのではなく、要素を左に浮かべることができますが、左下の要素にも同じ問題があります。 flexと表示することができますが、それはテキストのフォーマット方法に問題を引き起こします。私はa new pen展示のを作成しました

.column { 
    float: left; 
    width: 33.33%; 
} 

section { 
    text-align: center; 
    background-color: white; 
    width: 90%; 
    padding: 15px; 
    border: 1px solid #007d87; 
    margin-bottom: 5px; 
    opacity: 0.8; 
    display: inline-block; 
    text-align: left; 
    vertical-align: top; 
} 

：

<div class="column"> 
    <section> 
     <h2>Title</h2> 
     <p>Text</p> 
     <p>Text</p> 
    </section> 

    <section> 
     <h2>Title</h2> 
     <p>Text</p>    
    </section> 
</div> 

次にあなたがこれをカバーするために、わずかにあなたのCSSを変更する必要があります：私は推薦何

は3つの定義された列へのセクションでは、ダイビングですこの。

あなたの例は同じsectionsですが、実際のアプリケーションでは、上から下にではなく、左から右に読むようにセクションの順序を変更する必要があります。

希望すると便利です。