如何在Bootstrap中使两列的高度相同？

时间：2017-03-31 18:12:39

标签： html css twitter-bootstrap css3

我在并列引导程序中有两列col-md-4和col-md-8，但其中一列高于另一列。

如何缩小较高的一列以匹配较小列的高度？

css类listing-top正在使用弹性框。

DEMO https://jsfiddle.net/halnex/3dw85L1r/1/

HTML 

<section class="listing listing-top with-feature">
    <div class="col-md-4">
        <article class="tease top-latest tease-" data-post-id="1069327">

            <a class="overlay" href="#"></a>
            <div class="tag"></div>
            <figure style="background-image:url('http://i.imgur.com/WDCTb5S.jpg');">
                <div></div>
            </figure>
            <header>
                <h2><a href="#">Galaxy S8 face recognition already defeated with a simple picture</a></h2>
                <p class="excerpt">Face unlock feature once again defeated with anything resembling owner's face. </p>

                <p class="byline" itemprop="author creator" itemscope="" itemtype="#">
                    <a itemprop="url" href="#"><span itemprop="name">Author</span></a>
                    –  <time class="date" data-time="1490974219" datetime="2017-03-31T15:30:19+00:00">3/31/2017, 6:30 PM</time>
                </p>

            </header>
            <footer>
                <aside class="comments-hotness ">
                    <a title="25 posters participating" class="comment-count icon-comment-bubble-up" href="#">
                        <span class="comment-count-number">31</span>
                    </a>    </aside>

            </footer>
        </article>
    </div>

    <div class="col-md-8">
        <article class="tease top-latest tease-" data-post-id="1069327">

            <a class="overlay" href="#"></a>
            <div class="tag"></div>
            <figure style="background-image:url('http://i.imgur.com/WDCTb5S.jpg');">
                <div></div>
            </figure>
            <header>
                <h2><a href="#">Galaxy S8 face recognition already defeated with a simple picture</a></h2>
                <p class="excerpt">Face unlock feature once again defeated with anything resembling owner's face. </p>

                <p class="byline" itemprop="author creator" itemscope="" itemtype="#">
                    <a itemprop="url" href="#"><span itemprop="name">Author</span></a>
                    –  <time class="date" data-time="1490974219" datetime="2017-03-31T15:30:19+00:00">3/31/2017, 6:30 PM</time>
                </p>

            </header>
            <footer>
                <aside class="comments-hotness ">
                    <a title="25 posters participating" class="comment-count icon-comment-bubble-up" href="#">
                        <span class="comment-count-number">31</span>
                    </a>    </aside>

            </footer>
        </article>
    </div>
</section>

CSS 

.listing-top {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.listing-top.with-feature article.top-latest {
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    cursor: hand;
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: none;
    flex-flow: none;
}
.listing-top.with-feature article.top-latest .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 14;
}
.listing-top.with-feature article.top-latest .tag {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.listing-top.with-feature article.top-latest .tag {
    pointer-events: none;
    position: absolute;
    height: 36px;
    z-index: 15;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    font-family: economica;
    top: 15px;
    left: 0;
    display: none;
}
.listing-top.with-feature article .tag {
    pointer-events: none;
    position: absolute;
    height: 36px;
    z-index: 15;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    font-family: economica;
    top: 15px;
    left: 0;
    display: none;
}
.listing-top.with-feature article.top-latest figure {
    width: 100%;
    height: 0;
    padding-bottom: 55.55556%;
}
.listing-top.with-feature article.top-latest figure {
    -webkit-transition: all .17s;
    transition: all .17s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-color: #f0f1f2;
    background-blend-mode: multiply;
    margin: 0;
}
.listing-top.with-feature article figure {
    width: 100%;
    height: 0;
    padding-bottom: 55.55556%;
}
.listing-top.with-feature article figure {
    -webkit-transition: all .17s;
    transition: all .17s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-color: #f0f1f2;
    background-blend-mode: multiply;
    margin: 0;
}
figure {
    margin: 1em 40px;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}
.listing-top.with-feature article.top-latest header {
    background: -webkit-linear-gradient(top,#fff 15px,hsla(210,7%,95%,0));
    background: linear-gradient(180deg,#fff 15px,hsla(210,7%,95%,0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00f0f1f2",GradientType=0);
    margin: 15px;
    margin-top: -15px;
    padding: 15px;
    border-bottom: none;
    position: relative;
}
.listing-top.with-feature article header {
    background: -webkit-linear-gradient(top,#fff 15px,hsla(210,7%,95%,0));
    background: linear-gradient(180deg,#fff 15px,hsla(210,7%,95%,0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00f0f1f2",GradientType=0);
    margin: 15px;
    margin-top: -15px;
    padding: 15px;
    border-bottom: none;
    position: relative;
}
.listing-top.with-feature article.top-latest footer {
    width: 100%;
    margin-top: -25px;
    bottom: -10px;
}
.listing-top.with-feature article.top-latest footer {
    position: absolute;
    z-index: 15;
}
.listing-top.with-feature article.top-latest:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    border: 15px solid #ccc;
    border-top: none;
}
.listing-top.with-feature article:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    border: 15px solid #ccc;
    border-top: none;
}
.listing-top.with-feature article.top-latest footer .comments-hotness .comment-count {
    background-size: cover;
    width: 34px;
    height: 34px;
    display: block;
    margin: 0 auto;
    text-align: center;
    background-position: 50%;
}
.listing-top.with-feature article.top-latest footer .comments-hotness .comment-count .comment-count-number {
    padding: 0;
    margin: 0;
    line-height: 34px;
    font-size: 18px;
    color: #fff;
}
.listing-top.with-feature article.top-latest footer .comments-hotness .comment-count {
    font-family: economica;
    color: #fff;
    background-repeat: no-repeat;
    display: block;
    background-image: url('../img/comments.svg');
}
@media (min-width: 1000px) {
    .listing-top.with-feature article.top-latest .tag:before {
        top: 11px;
        height: 14px;
        width: 18px;
        background-image: url('../img/arrow.svg');
    }
}
.listing-top.with-feature article.top-latest .tag:before {
    background-image: url('../img/arrows.svg');
    height: 9px;
    width: 18px;
    top: 13px;
    right: 10px;
}
.listing-top.with-feature article.top-latest .tag:before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}
.listing-top.with-feature article .tag:before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}
.listing-top.with-feature article.top-latest .tag:after {
    content: "Latest stories";
    margin-left: 10px;
    margin-right: 36px;
}
.listing-top.with-feature article.top-latest .tag:after {
    content: "";
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}
.listing-top.with-feature article .tag:after {
    content: "";
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

3 个答案:

答案 0 :(得分：1)

您可以制作内容height:100% .. 

.listing-top.with-feature article.top-latest {
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    cursor: hand;
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: none;
    flex-flow: none;
    height: 100%;
}

https://jsfiddle.net/h5c703q3/

答案 1 :(得分：0)

＆＃13;
＆＃13; 
.listing-top {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.listing-top.with-feature article.top-latest {
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    cursor: hand;
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: none;
    flex-flow: none;
}
.listing-top.with-feature article.top-latest .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 14;
}
.listing-top.with-feature article.top-latest .tag {
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.listing-top.with-feature article.top-latest .tag {
    pointer-events: none;
    position: absolute;
    height: 36px;
    z-index: 15;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    font-family: economica;
    top: 15px;
    left: 0;
    display: none;
}
.listing-top.with-feature article .tag {
    pointer-events: none;
    position: absolute;
    height: 36px;
    z-index: 15;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    font-family: economica;
    top: 15px;
    left: 0;
    display: none;
}
.listing-top.with-feature article.top-latest figure {
    width: 100%;
    height: 0;
    padding-bottom: 55.55556%;
}
.listing-top.with-feature article.top-latest figure {
    -webkit-transition: all .17s;
    transition: all .17s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-color: #f0f1f2;
    background-blend-mode: multiply;
    margin: 0;
}
.listing-top.with-feature article figure {
    width: 100%;
    height: 0;
    padding-bottom: 55.55556%;
}
.listing-top.with-feature article figure {
    -webkit-transition: all .17s;
    transition: all .17s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-color: #f0f1f2;
    background-blend-mode: multiply;
    margin: 0;
}
figure {
    margin: 1em 40px;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}
.listing-top.with-feature article.top-latest header {
    background: -webkit-linear-gradient(top,#fff 15px,hsla(210,7%,95%,0));
    background: linear-gradient(180deg,#fff 15px,hsla(210,7%,95%,0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00f0f1f2",GradientType=0);
    margin: 15px;
    margin-top: -15px;
    padding: 15px;
    border-bottom: none;
    position: relative;
}
.listing-top.with-feature article header {
    background: -webkit-linear-gradient(top,#fff 15px,hsla(210,7%,95%,0));
    background: linear-gradient(180deg,#fff 15px,hsla(210,7%,95%,0));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00f0f1f2",GradientType=0);
    margin: 15px;
    margin-top: -15px;
    padding: 15px;
    border-bottom: none;
    position: relative;
}
.listing-top.with-feature article.top-latest footer {
    width: 100%;
    margin-top: -25px;
    bottom: -10px;
}
.listing-top.with-feature article.top-latest footer {
    position: absolute;
    z-index: 15;
}
.listing-top.with-feature article.top-latest:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    border: 15px solid #ccc;
    border-top: none;
}
.listing-top.with-feature article:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    border: 15px solid #ccc;
    border-top: none;
}
.listing-top.with-feature article.top-latest footer .comments-hotness .comment-count {
    background-size: cover;
    width: 34px;
    height: 34px;
    display: block;
    margin: 0 auto;
    text-align: center;
    background-position: 50%;
}
.listing-top.with-feature article.top-latest footer .comments-hotness .comment-count .comment-count-number {
    padding: 0;
    margin: 0;
    line-height: 34px;
    font-size: 18px;
    color: #fff;
}
.listing-top.with-feature article.top-latest footer .comments-hotness .comment-count {
    font-family: economica;
    color: #fff;
    background-repeat: no-repeat;
    display: block;
    background-image: url('../img/comments.svg');
}
@media (min-width: 1000px) {
    .listing-top.with-feature article.top-latest .tag:before {
        top: 11px;
        height: 14px;
        width: 18px;
        background-image: url('../img/arrow.svg');
    }
}
.listing-top.with-feature article.top-latest .tag:before {
    background-image: url('../img/arrows.svg');
    height: 9px;
    width: 18px;
    top: 13px;
    right: 10px;
}
.listing-top.with-feature article.top-latest .tag:before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}
.listing-top.with-feature article .tag:before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}
.listing-top.with-feature article.top-latest .tag:after {
    content: "Latest stories";
    margin-left: 10px;
    margin-right: 36px;
}
.listing-top.with-feature article.top-latest .tag:after {
    content: "";
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}
.listing-top.with-feature article .tag:after {
    content: "";
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.cohttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssm/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<section class="listing listing-top with-feature">
        <div class="col-sm-6 form-group">
            <article class="tease top-latest tease-" data-post-id="1069327">

                <a class="overlay" href="#"></a>
                <div class="tag"></div>
                <figure style="background-image:url('http://i.imgur.com/WDCTb5S.jpg');">
                    <div></div>
                </figure>
                <header>
                    <h2><a href="#">Galaxy S8 face recognition already defeated with a simple picture</a></h2>
                    <p class="excerpt">Face unlock feature once again defeated with anything resembling owner's face. </p>

                    <p class="byline" itemprop="author creator" itemscope="" itemtype="#">
                        <a itemprop="url" href="#"><span itemprop="name">Author</span></a>
                        –  <time class="date" data-time="1490974219" datetime="2017-03-31T15:30:19+00:00">3/31/2017, 6:30 PM</time>
                    </p>

                </header>
                <footer>
                    <aside class="comments-hotness ">
                        <a title="25 posters participating" class="comment-count icon-comment-bubble-up" href="#">
                            <span class="comment-count-number">31</span>
                        </a>	</aside>

                </footer>
            </article>
        </div>

        <div class="col-sm-6">
            <article class="tease top-latest tease-" data-post-id="1069327">

                <a class="overlay" href="#"></a>
                <div class="tag"></div>
                <figure style="background-image:url('http://i.imgur.com/WDCTb5S.jpg');">
                    <div></div>
                </figure>
                <header>
                    <h2><a href="#">Galaxy S8 face recognition already defeated with a simple picture</a></h2>
                    <p class="excerpt">Face unlock feature once again defeated with anything resembling owner's face. </p>

                    <p class="byline" itemprop="author creator" itemscope="" itemtype="#">
                        <a itemprop="url" href="#"><span itemprop="name">Author</span></a>
                        –  <time class="date" data-time="1490974219" datetime="2017-03-31T15:30:19+00:00">3/31/2017, 6:30 PM</time>
                    </p>

                </header>
                <footer>
                    <aside class="comments-hotness ">
                        <a title="25 posters participating" class="comment-count icon-comment-bubble-up" href="#">
                            <span class="comment-count-number">31</span>
                        </a>	</aside>

                </footer>
            </article>
        </div>
    </section>
＆＃13;
＆＃13;
＆＃13;

  1. 如果您希望块高度相同，那么我们将在使用Jquery时实现它。

  2. 取div高度$（选择器）.innerHeight（）;

  3. 将该高度赋予所需的div，然后两个div块将达到相同的高度。

答案 2 :(得分：0)

您可以使用Foundation而使用数据均衡器。很棒的工具：）

相关问题
最新问题