使用多個元素的行中的自舉垂直對齊（對所有列）

我已經使用引導行設計創建了一行。使用多個元素的行中的自舉垂直對齊（對所有列）

<div class="row"> 
<div class="col-xs-3 col-md-3"> 
<div class="heading"> 
<h1> Fist column h1 </h1> 
</div> 
<div class="content"> 
<p> First column p </p> 
</div> 
</div> 
<div class="col-xs-3 col-md-3"> 
<p> Second column p </p> 
<p> Second column p </p> 
<p> Second column p </p>  
</div> 
<div class="col-xs-3 col-md-3">  
<h1> Third column h1 </h1> 
<p> Third column p </p> 
<h1> Third column h1 </h1> 
<p> Third column p </p>  
</div> 
<div class="col-xs-3 col-md-3"> 
<div class="new-content"> 
<p> Fourth column p </p>  
</div> 
</div>

我怎樣才能確保此行是垂直神韻：對每列？因此，無論每行中包含多少個元素 - 它們總是在行高中垂直排列到其他列（如果這有助於我們假設行的高度爲70px）。

請找小提琴這裏：https://jsfiddle.net/nkfdhpo3/

而且我想達到什麼樣的可視化圖像：

來源

2016-02-23 Robert Androsz

如果我理解正確此。你的問題是，h1標籤頂部有20像素的邊距。

要解決使用CSS來將它們設置爲0。

h1 { 
    margin-top: 0; 
}

您可能希望將它應用到所有頭的大小。

見https://jsfiddle.net/nkfdhpo3/1/

來源

2016-02-23 23:50:54 Legin76

對不起，你聽錯了。我想要實現的是：第一列所有元素都有70px高度，第二列元素有50px高度，第三個40px高度，第四個10px高度。我希望每個列元素的中間位於相同的行上 - 因此它們都是垂直排列的。類似於http://codepen.io/hashem/pen/zwJaE但沒有破壞同一列內的元素（在本例中它們彼此相鄰） –

這是怎麼回事？ https://jsfiddle.net/nkfdhpo3/4/ – Legin76

這麼簡單...謝謝。 –

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <style type="text/css"> 
     h1, p { 
      height: 70px; 
      vertical-align: bottom; 
      margin-top: 0; 
      margin-bottom: 0; 
     } 
    </style> 

</head> 
<body> 
    <div class="row"> 
     <div class="col-xs-3 col-md-3"> 
      <div> 
       <h1> Fist column h1 </h1> 
      </div> 
      <div> 
       <p> First column p </p> 
      </div> 
     </div> 
     <div class="col-xs-3 col-md-3"> 
      <p> Second column p </p> 
      <p> Second column p </p> 
      <p> Second column p </p> 
     </div> 
     <div class="col-xs-3 col-md-3"> 
      <h1> Third column h1 </h1> 
      <p> Third column p </p> 
      <h1> Third column h1 </h1> 
      <p> Third column p </p> 
     </div> 
     <div class="col-xs-3 col-md-3"> 
      <div> 
       <p> Fourth column p </p> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-02-23 23:56:42 kblau

是的，你可以只設計h1標籤。你可以更清楚地知道你想要哪個h1標籤。 http://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-elements – kblau

對不起 - 並沒有幫助解決列之間的垂直alligmnent。類似於：http://codepen.io/hashem/pen/zwJaE - 但不能將列內的元素分解爲行。 –

我添加了一個理想結果的圖像，所以它更容易理解。 –

使用多個元素的行中的自舉垂直對齊（對所有列）

回答

相關問題