試圖對齊旁邊的兩個div並失敗

Question

在我的代碼下面，我想div類card-columns內聯/毗鄰類card-custom的div。

我想我正在嘗試很容易，但我無法找到正確的組合顯示和浮動來得到它的工作。

我試圖使父div的柔性與display: flex希望它只是工作。但是，儘管它使得它混亂了第一個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

你在正確的軌道上。

添加display: flex父DIV：

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

第一個div將萎縮的原因有兩個：

• 柔性容器的初始設置爲flex-shrink: 1。這意味着flex項目可以縮小（防止它們溢出容器）。
• 柔性容器的另一個初始設置是flex-wrap: nowrap。這意味着flex項目被限制在一行中，允許flex-shrink: 1工作。

將flex-shrink: 0添加到第一個div以禁用收縮功能。

有關詳細信息，請參閱「的flex-shrink因素」節這樣的回答：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

你試過向左或向右浮動？確保卡列和卡片定製的總寬度不超過包含它們的div或元素的總寬度大小。此外，引導網格系統將幫助解決這個問題。

Answer 3

只需添加到您的CSS

.card-custom{ 
    float: left; 
}