對齊垂直不同的段落

我正在用本網站使用Drupal www.crincon.com創建。幻燈片下方的部分包含幾個嵌套div元素的塊，並在末尾有一個鏈接。對齊垂直不同的段落

我想要做的是，通「更多」（與按鍵方面）將全部在同一高度，用相同的垂直對齊方式爲所有的塊，在被顯示同一級別。

的HTML爲所有的塊看起來是這樣的：

<div class="column one"> 
 
<div class="region region-top-first"> 
 
    <div id="block-block-7" class="block block-block"> 
 

 
     
 
    <div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization to the market of Russia, CIS and Baltic States</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
    
 
</div> <!-- /.block --> 
 
</div> 
 
<!-- /.region --> 
 
</div>

我已經嘗試了許多不同的選擇在一些迴應在這裏尋找（如相對絕對位置），但沒有成功。

謝謝！

來源

2016-12-22 F.Javier

你也可以發佈你的** CSS ** .. –

提供jsfiddle網址。 – aavrug

你可以用位置來對齊同一個地方的東西，比較好的你發佈確切的html和css，這樣有人可以幫忙出 – Aru

定位讀取更多按鈕，如下面的代碼。我向該按鈕添加一個類。

.readmore { 
    position: absolute; 
    bottom: 10px; 
    left: 0; 
    right: 0; 
} 
.content { 
    position: relative; 
}

來源

2016-12-22 11:07:27

謝謝！關鍵是要正確定位按鈕並添加這些類。 –

沒問題。是的，位置是對齊元素的關鍵。 –

您可以使用柔性，使這個簡單：

.block { 
 
    display:flex; 
 
    flex-wrap:wrap 
 
} 
 
.content { 
 
    text-align:center; 
 
    padding:1em; 
 
    background:#0194CA; 
 
    box-shadow:inset 0 0 1px,inset 0 0 40px white; 
 
    width:15%; 
 
    min-width:150px; 
 
/* what does the thing you want , stands here below , but parent has to be a wrapping flex element : */ 
 
    display:flex; 
 
    flex-flow:column; 
 
    justify-content:space-between; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
    <div id="block-block-7" class="block block-block"> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization to the</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization to the market of Russia, </h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization to the market of Russia, CIS and Baltic States</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization Baltic States</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization to the market of Russia, CIS and Baltic States</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization to the market of Russia, CIS and Baltic States</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
<div class="content"> 
 
    <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> 
 
    <h2>Localization to the market of Russia, CIS and Baltic States</h2> 
 
    <p><a href="en/services/localization">Read more</a></p> 
 
    </div> 
 
</div>

來源

2016-12-22 11:11:28

這可能幫助你以某種方式。

#top-area a { 
    color: #ECF9FD; 
    border: 1px solid #92DAF5; 
    padding: 5px 10px; 
    border-radius: 3px; 
    position: absolute; 
    bottom: 20px; 
    left: 20%; 
    right: 20%; 
}

來源

2016-12-22 11:16:10

對齊垂直不同的段落

回答

相關問題