flex屬性messes按鈕的按鈕高度？

我正在使用flex佈局，我只是喜歡它是如何工作的，但我在佈局屬性中遇到困難。flex屬性messes按鈕的按鈕高度？

我使用引導程序並使用flex進行佈局。

當前該按鈕正在取得容器的高度。文字下有很多空間，我想刪除我，當我添加填充按鈕時，它的大小會變得不均勻。我試圖調整線高度的大小，但我試圖找到實際的解決方案，以及爲什麼我有這個問題的原因。

任何我在這裏用flex失蹤還是別的東西？任何幫助將不勝感激。謝謝。

.vessel-card { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.vessel-card h3 { 
 
    margin: 0; 
 
    padding: 20px 0; 
 
} 
 
.departure-card { 
 
    display: flex; 
 
    padding: 20px 0; 
 
    border-top: 2px solid #888; 
 
} 
 
.departure-card p { 
 
    margin-right: 10px; 
 
} 
 
.departure-card:last-child { 
 
    border-bottom: 2px solid #888; 
 
} 
 
.departure-card .btn-explore { 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
    color: #000; 
 
    border-radius: 0; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 vessel-card"> 
 
     <a href="cienfuegos-from-havana.html" class="special-departure"> 
 
     <img src="http://placehold.it/350x150"> 
 
     </a> 
 
     <h3>Vessel: Panorama</h3> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999</p> 
 
     <a href="#" class="btn btn-explore">Explore</a> 
 
     </div> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999</p> 
 
     <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-02-05 vikrantnegi007

Flexbox的使項目相同height，你可以在這裏看到Demo，但你可以使用align-items更改或在您的案件Demo

.parent { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 

 
.child { 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
} 
 

 
.child:first-child { 
 
    height: 100px; 
 
}

<div class="parent"> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
</div>

來源

2016-02-05 12:06:15

謝謝@Nenad喜歡你的解決方案。 – vikrantnegi007

不客氣。只需要添加一下，你在'p'標籤上有默認'margin'，你也可以使用'flex-start'等其他'align-items'選項https://jsfiddle.net/6qym530t/2/ –

flex-開始呢？ – vikrantnegi007

您需要包括在該段的按鈕。我還在5px的按鈕中包含了一個padding，以便該框與文本距離不太近，但可以根據需要更改該值，或在不需要時將其完全刪除。

.vessel-card { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.vessel-card h3 { 
 
    margin: 0; 
 
    padding: 20px 0; 
 
} 
 
.departure-card { 
 
    display: flex; 
 
    padding: 20px 0; 
 
    border-top: 2px solid #888; 
 
} 
 
.departure-card p { 
 
    margin-right: 10px; 
 
} 
 
.departure-card:last-child { 
 
    border-bottom: 2px solid #888; 
 
} 
 
.departure-card .btn-explore { 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
    color: #000; 
 
    border-radius: 0; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 vessel-card"> 
 
     <a href="cienfuegos-from-havana.html" class="special-departure"> 
 
     <img src="http://placehold.it/350x150"> 
 
     </a> 
 
     <h3>Vessel: Panorama</h3> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999 
 
      <a href="#" class="btn btn-explore">Explore</p></a> 
 
     </div> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999 
 
      <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</p></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-02-05 11:59:51

flex屬性messes按鈕的按鈕高度？

回答

相關問題