Question

我正在使用Drupal www.crincon.com创建的这个网站。幻灯片下的部分包含几个具有嵌套div元素的块和末尾的链接。

我想做的是链接＆＃34;阅读更多＆＃34; （按钮方面）将全部在同一高度，所有块的垂直对齐方式相同，显示在同一级别。

所有块的HTML如下所示：

＆＃13;

<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>

＆＃13;

我在这里尝试了许多不同的选项（比如相对绝对位置），但没有成功。

谢谢！

Answer 1

定位读取更多按钮，如下面的代码。我在按钮上添加了一个类.readmore。

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

Answer 2

您可以使用flex来简化：

.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>

Answer 3

这可能会以某种方式帮助你。

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

垂直对齐不同的段落

3 个答案: