试图对齐旁边的两个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; 
}