Question

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

除此之外，根据分辨率，按钮或内容不在列中（因为后者的高度是固定的）。

解决我问题的想法？

PS：我使用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强制容器的所有兄弟姐妹拥有相同的身高。

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用户的主要部分，请考虑这一点。

Answer 2

你可以尝试这个：

body {
    background-color: #444;
    margin: 0;
}

#wrapper {
     width: 1005px;
     margin: 0 auto;
}
#leftcolumn, #rightcolumn {
    border: 1px solid white;
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 250px;
     background-color: #111;
}

#rightcolumn {
     width: 750px;
     background-color: #777;
}

DEMO

内容相同的列高

2 个答案: