Question

我有一个彩色框内有4篇文章的视图。当屏幕足够宽时，它们需要并排显示并具有相同的高度：

Article 1       Article 2
Article 3       Article 4

我尝试添加样式，因此容器 - 行和列具有以下样式，但是没有结果：

.container-height{
display:table;
}

.row-height{
display:table-row;
}

.col-height{
display:table-cell;
float:none;
}

https://plnkr.co/edit/vrlHw8tepKZ5nj4SW8EB?p=preview

Answer 1

好吧，如果您对jquery解决方案没问题，那么请看一下这段代码。

检查fiddle

$(document).ready(function(e) {
    var heightNew = 0;
    $('.col-md-6 article').each(function(index, element) {
        if($(this).height() > heightNew){
            heightNew = $(this).height();
        }
        $(this).css('height', heightNew+'px');
    });
});

所以只需在标签中添加此内容并使用此css。

article{
    text-align:center;
    background-color:lightgray;
    margin:0 25px 50px 25px;
}
h1, p{
    padding:10px;
}

我所做的是，我把文章的最大高度给了其他人，所以谁是最大的文章，所有文章都是相同的高度。希望你会喜欢我的想法。谢谢

Answer 2

通过使用bootstrap类可以实现彼此并排 col-lg-6在2 cols的情况下，这相加12，只在大屏幕上激活（从1200px及以上）

获得所有列的相同高度的最快方法（如果是固定内容）是通过设置高度，利用媒体查询

@media(min-width: 1200){ height: xx; }

Answer 3

如果您使用Bootstrap。此代码对您非常有帮助

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="container">
            <div class="row  row-eq-height">
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec.. Lorem ipsum dolor sdfdfdit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sit fdfdfamet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sidfdft amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
                <div class="col-md-6">
                    <h1>Header 1 </h1>
                    <p>Lorem ipsum dolor sit afgfmet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
                </div>
            </div>
        </div>
    </body>

</html>

<!-- begin snippet: js hide: false -->

Bootstrap 3 - 行中的列应具有相同的高度

3 个答案: