内容相同的列高度

Question

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

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

See here the picture

思路来解决我的问题？ 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