试图垂直对齐zurb基础中的两列

Posted 2023-03-06

【中文标题】试图垂直对齐zurb基础中的两列

【英文标题】：Trying to vertically align two columns in zurb foundation

【发布时间】：2013-08-29 14:05:02

【问题描述】：

我正在将 Zurb Foundation 与 Sass Compass 一起使用，但这对于 css 中的任何内容都可能存在问题。

所以，我有这样的代码

<div class="row">
    <div class="small-6 column">...</div>
    <div class="small-6 column">...</div>
</div>

这些列的内容高度不同，这取决于我要在其中放置多少文本和图像。该行没有明确的高度，由最高列的高度决定。现在最高的列将按原样显示，但另一列较短，我希望它的内容垂直居中。我环顾四周，并尝试使用 display: table 和相对定位，但它们都没有提供我需要的东西。

【参考方案1】：

将垂直对齐的文本包装在与其父级高度相同的 div 中，并 display:table-cell 它（在将其父级显示为表格后）：

html

    <div class="row">
        <div class="small-6 column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et iaculis justo. Mauris bibendum convallis est, vel blandit quam tempor aliquet. Cras euismod nibh et nisl congue, eget tincidunt mauris consectetur. Donec eu risus lectus. Integer at ipsum sed turpis fringilla adipiscing vitae vel enim.</div>
        <div class="small-6 column"><div class="v_align">Some text</div></div>
        <div class="clear"></div>
    </div>
<div style="width:200px; height:100px; background:#0f0; color:#fff;">dfbvd bdfhgf hfg hghf gfdh hfgghfd hgf</div>

CSS

.row
    width:300px;
    height:auto;    

.clearclear:both;

.column:first-child
    color:#f00;
    background:#ccc;

.column:nth-child(2)
    background:#999;
    color:#00f;
    display:table;

.column
    width:150px;
    float:left;

.v_align
    display:table-cell;
    vertical-align:middle;

JS

$(document).ready(function()
    var rowHeight = $(".row").height();
    console.log(rowHeight);
    $(".column").height(rowHeight);
    $(".v_align").height(rowHeight);
);

查看结果：http://jsfiddle.net/gespinha/h6aPf/6/

【讨论】：

有趣的解决方案，但不幸的是，我不能为行和列提供任何高度属性。我的第一列包含带有一个 h2 标签和 0 到几个 p 标签的动态文本。我的第二列包含一个尺寸相对较大的 img 标签。图像将缩放并保持其纵横比，因此当我使浏览器扩展或收缩时，高度也会发生变化。我正在制作一个完全灵活的布局。如果像素是提前确定的，我可能会使用相对定位。无论如何，今晚我会留下这个，如果没有解决方案，我将使用 javascript。

我已经用新的解决方案更新了上面的答案，这是您需要的吗？

这是一个双重响应。首先，当你在行上使用 position: absolute 时，如果我在 div.row 后面放了任何东西，我会把它放在后面，这不是我想要的。其次，当您将所有三个 div 的高度设置为 100% 时，它会占用页面的整个高度，而我希望它只占用内容所需的高度。

更新了上面的帖子，你必须为此添加一些javascript。我在上面的示例中使用了 Jquery。 div 拉伸并确定插入内容时的高度。我添加了一个新的绿色 div，向您展示它现在的工作原理：)

实际上，如果 W3C 在他们的路线图上是最终的，一旦可以在 CSS 中应用变量，CSS4 可能会允许我们在没有 javascript 的情况下做你想做的事情。如今，不幸的是，您仍然无法在 CSS 中比较或关联高度，如果没有这种能力，您将无法做到这一点。感谢您的挑战；）