浮动 div，高度不均匀，水平对齐锚标签

Question

我有 3 个浮动 divs（使用基础 5），里面有内容。

高度不均，所有 3 个浮动 div 内部有一个锚标记作为打开与该内容相关的页面的按钮。

我想水平对齐 div 中的锚标记，这样 dive 中的所有按钮都在同一行上。

目前的情况 - DEMO

我能想到的唯一方法是为每个 div 添加另一个 div 并为每个按钮留出边距，还有其他方法可以实现吗？因为这将是动态的。

<div class="large-4 small-12 medium-12 columns">

    <div class="large-4 small-12 medium-4 columns text-center">
        <a href="page.html">
         <i> </i>
     </a>
    </div>

    <div class="large-8 small-12 medium-8 columns">
        <a href="social_it.html">
<h5>Heading</h5>
        </a>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint dolore illo quod reiciendis veritatis vitae unde nobis sequi eaque tempora natus architecto in hic aliquam ut at dolor perspiciatis consequatur?</p>

        <a class="btn-custom" href="page.html">Know more</a>
    </div>

</div>

Answer 1

你为什么不使用 Zurb 的均衡器：http://foundation.zurb.com/docs/components/equalizer.html

如果您不介意使用 js，它是轻松使 div 等高的绝佳选择。

示例结构如下：

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    ...
  </div>
</div>

这是一个工作示例：http://codepen.io/nathanw/pen/EadQyN

浮动 div，高度不均匀，水平对齐锚标签

Floated div with uneven height align anchor tag inside horizontally

html

css

zurb-foundation