html - 与内部内容相同的列高

Question

今天我遇到了一个 CSS 问题。我有一个问题，我的两列由于内容和屏幕分辨率的不同而高度不同。所以我将列的高度设置为 650px。

除了现在，根据分辨率，按钮或内容在列外(因为后者的高度是固定的)。

See here the picture

解决我的问题的想法？

附言:我使用的是 Bootstrap。

<article class="section-wrapper clearfix" id="rejoindre">
        <div class="content-wrapper clearfix">
            <div class="col-sm-12 col-md-12">
                <!-- Titre -->
                <h1 class="text-center">Vous aussi rejoignez l'aventure !</h1>
                <div class="col-sm-6 col-md-6">
                    <div class="thumbnail" style="height : 650px;">
                        <img alt="..." src=
                        "assets/images/other_images/section_rejoindre/btn_decouverte.png">
                        <div class="caption">
                            <h3 class="text-center">NIMERIA Demo</h3>
                            <p class="text-center">Le Mode Découverte est un
                            module qui vous permet d'essayer sans candidature
                            une partie des ajouts exclusifs de Niméria.</p>
                            <ul class="pull-left">
                                <li>Sans candidature(sauf bêta)</li>
                                <li>Inscription rapide</li>
                                <li>Reset de la map</li>
                                <li>Accès au système de quête</li>
                            </ul>
                            <div class="clearfix"></div>
                            <p class="text-center"><a class=
                            "btn btn-primary btn-lg" href=
                            "http://91.121.160.218/oldforum/forums/candidatures-postulez-pour-la-beta.193/"
                            style=
                            "border-radius: 5px; background:#597A78;">S'inscrire
                            et jouer !</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-6">
                    <div class="thumbnail" style="height : 650px;">
                        <img alt="..." src=
                        "assets/images/other_images/section_rejoindre/btn_world.png">
                        <div class="caption">
                            <h3 class="text-center">NIMERIA World</h3>
                            <p class="text-center">Niméria World est le serveur
                            original qui vous propose toutes les
                            fonctionnalités et ajouts inédits qui font le
                            succès du projet.</p>
                            <div class="pull-left">
                                <ul>
                                    <li>Sous candidature</li>
                                    <li>Création du personnage</li>
                                    <li>Choix d'une nation</li>
                                    <li>Présence des saisons</li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <p class="text-center"><a class=
                            "btn btn-primary btn-lg" href=
                            "http://91.121.160.218/oldforum/" style=
                            "border-radius: 5px; background:#597A78;">Bientôt
                            disponible</a></p>
                        </div>
                    </div>
                </div>
                <div></div><!-- .content-wrapper -->
            </div>
        </div>
    </article><!-- .section-wrapper -->

Answer 1

您可以使用 display: flex 强制容器的所有 sibling 具有相同的高度。

See this jsfiddle

HTML:

<div id="container">
    <div class="box">Lorem ipsum...</div>
    <div class="box">Lorem ipsum</div>
    <div class="box">Lorem ipsum</div>
    <div class="box">Lorem ipsum</div>
</div>

CSS:

#container {
    display: flex;
    flex-direction: row;
}
.box {
    padding: 20px;
    background-color: red;
    margin-right: 20px;
    width: 200px;
}

在您的情况下，display:flex 应该用在您的盒子的父容器上，它们应该具有相同的高度。

Flexbox 是 only partially supported in IE 10并且在 IE 9 及以下版本中不受支持。如果您希望有大部分 IE 用户，请考虑这一点。