Question

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

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

我想将div中的锚标记水平对齐，以便潜水中的所有按钮都在同一行中。

目前情况如何 - 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将锚标签水平对齐

1 个答案: