お互いの隣にある2つのdivを整列しようとして失敗する

Question

私のコードでは、card-columnsクラスのdivはクラスcard-customのdivとインライン/隣接するようにしたいと思います。

私は何をしようとしているのは簡単だと思っていますが、ディスプレイとフロートが正しく動作するように、正しい組み合わせを見つけることができません。

display: flexでフレックスdivをフレックスにしてみましたが、うまくいくと思っていました。しかし、それはそれと一緒にそれを作る最初のdivのサイジングを混乱させる。

誰かが私が間違っていることを教えてもらえますか？

私はここにcodepen例を持ってhttp://codepen.io/anon/pen/grxRza

.maxWidth { 
 
    width: 100%; 
 
    max-width: 1370px; 
 
    margin: 60px auto; 
 
    padding: 0 20px; 
 
} 
 

 
.card-columns { 
 
    column-count: 5; 
 
} 
 
.intermission { 
 
    color: blue; 
 
    column-span: all; 
 
    border: 2px solid; 
 
} 
 

 
.card-custom { 
 
    border: 1px solid blue; 
 
    width: 430px; 
 
    height: 220px; 
 
    
 
}

 
    <!-- intermission column span full --> 
 
    <div class="intermission"> 
 
    
 
    <div class="card-custom"> 
 
    </div> 
 
    
 
    <div class="card-columns"> 
 
    
 
    <div class="card"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
    </div> 
 
    </div> 
 
    
 
    
 
    <div class="card"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="card"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
    </div> 
 
    </div> 
 
    
 
    </div><!-- end intermission card-columns --> 
 
    </div><!-- end intermission div--> 
 
    
 
    

Answer 1

にこれを追加します。フレックスコンテナの初期設定がflex-shrink: 1ある

• ：最初のdivは、二つの理由のために縮小されます

  .intermission { 
      display: flex; /* NEW */ 
      color: blue; 
      border: 2px solid; 
  } 
  

  ：

  は、親のdivにdisplay: flexを追加します。これは、フレックスアイテムが縮小できることを意味します（コンテナのオーバーフローを防ぐ）。

• フレックスコンテナの別の初期設定はflex-wrap: nowrapです。これはフレックスアイテムが1行に限定されていることを意味し、flex-shrink: 1が動作することを可能にします。

flex-shrink: 0を最初のdivに追加すると、縮小機能が無効になります。詳細については

、この答えでセクション"flex-shrink要因" を参照してください。inline-：https://stackoverflow.com/a/34355447/3597276

Revised Codepen

.intermission { 
 
    display: flex; 
 
    color: blue; 
 
    border: 2px solid; 
 
} 
 
.card-columns { 
 
    column-count: 5; 
 
} 
 
.card-custom { 
 
    border: 1px solid blue; 
 
    width: 430px; 
 
    height: 220px; 
 
    flex-shrink: 0; /* NEW */ 
 
}

<link href="http://afkweb.com/etc/bootstrap-4-alpha/bootstrap.css" rel="stylesheet"/> 
 
<div class="intermission"> 
 
    <div class="card-custom"></div> 
 
    <div class="card-columns"> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
     </div> 
 
    </div> 
 
    <div class="card"> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Card title that wraps to a new line</h4> 
 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたが左にフロートまたは右を試してみましたか？ card-columnとcard-customの合計幅が、divまたは要素を含む要素の合計幅サイズを超えないようにしてください。さらに、ブートストラップ・グリッド・システムは、これを容易に解決するのに役立ちます。

Answer 3

ただ、あなたは正しい軌道に乗っていたあなたのCSS

.card-custom{ 
    float: left; 
}