Question

我正在努力弄清楚如何设置两列＆＃39; a元素到100％的父元素，没有指定这个高度，但根据两列的较高者选择它。同时，我想在其列的列中垂直对齐a元素。

当前代码：

<div class="post-nav group">

                <div class="post-nav-prev">
                    <div class="post-nav-border border-reset-right">
                    <?php previous_post('%', '', 'yes'); ?>
                    </div>
                </div>
                <div class="post-nav-next">
                    <div class="post-nav-border">
                    <?php next_post('%', '', 'yes'); ?>
                    </div>
                </div>

            </div>

CSS：

.post-nav {

}

.post-nav-prev, .post-nav-next {
    float: left;
    width: 50%;
    height: 100%;
}

.post-nav-prev a, .post-nav-next a {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    height: 100%;
    padding: 10px;      
}

.post-nav-prev a {
    padding-left: 25px;
}

.post-nav-next a {
    padding-right: 25px;
}

.post-nav-border {
    border: 1px solid #e3e3e3;
    height: 100%;
}

我最终遇到的问题是两个帖子的标题不是相同数量的行。我最初有一个指定的高度，但这对于网站的响应方面来说并不是最佳的。

所以要澄清一下：我将如何获得最高的＆＃39; .post-nav-prev a＆＃39;和＆＃39; .post-nav-next a＆＃39;指定.post-nav的高度，因此两个元素中的另一个也获得100％的高度。我已经看到了显示的建议：表格，但是我无法完成这项工作，并且保持显示的垂直对齐方式：flex。

有什么建议吗？

Answer 1

最简单的解决方案（没有JS）确实摆弄了display属性，并将容器设置为table，将子容器设置为table-cell（您可以更改实际的标记成为一个表，结果是一样的）。有了这个，垂直对齐变得容易，因为地狱和CSS＆amp; HTML更简单。方法如下：

.post-nav { 
    display: table; 
    border-collapse: collapse; 
}
.post-nav-prev a, .post-nav-next a { 
    display: block; 
    padding: 10px; 
}
.post-nav-prev, .post-nav-next {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    height: 100%;
    border: 1px solid #e3e3e3;
    text-align: center;
}

<div class="post-nav group">
    <div class="post-nav-prev"><a href="#">text 1</a></div>
    <div class="post-nav-next">
       <a href="#">text 2 is too long and falls in 2 lines for the example case</a>
    </div>
</div>

Answer 2

如果你对jquery开放，那么这样的事情对你有用吗？

$(document).ready(function() {
    adjust();
    function adjust() {
        if ($('.left a').height() > $('.right a').height()) {
            $('.right a').css("min-height", $('.left a').height());
        }
        if ($('.right a').height() > $('.left a').height()) {
            $('.left a').css("min-height", $('.right a').height());
        }
    }
    
    $('.addLeft').click(function() {
        $('.left a').append('<br/>Adding more');
        adjust();
    });
    $('.addRight').click(function() {
        $('.right a').append('<br/>Adding more');
        adjust();
    });
});

.left, .right {
    display: inline-block;
    width: 40%;
    vertical-align: top;
}
a {
    height: 100%;
    display:inline-block; 
}
.left a {
    background-color: lightblue;
}
.right a {
    background-color: lightgray;
}
.container {
    background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="addLeft">Add more to Left</a>
<br/>
<a href="#" class="addRight">Add more to Right</a>
<br/><br/>
<div class="container">
    <div class="left">
        <a href="#">A element </a>
    </div>
    <div class="right">
        <a href="#">A element<br/>More content here </a>
    </div>
</div>

根据最高的子元素动态指定父级的高度？

2 个答案: