2016-03-20 11 views
0

私はすべての行を同じ高さに保つ方法を見つけようとしています。私が遭遇する問題は、コンテンツがないときには、パディングの高さまで縮小するということです。Divsを同じ高さに維持する

完全な例は、ここで見つけることができます:https://jsfiddle.net/c85ajj9a/

コードスニペット:何のコンテンツが存在しない場合でも

<div class="col-md-12"> 
            <div class="col-md-1 detail-box leftcolumn-bold">Co-Bor 1:</div> 
            <div class="col-md-1 detail-box">Maria</div> 
            <div class="col-md-1 detail-box">Smith</div> 
            <div class="col-md-2 detail-box">699, 685, 675</div> 
            <div class="col-md-1 detail-box">$6,500.00</div> 
            <div class="col-md-2 detail-box email-text">[email protected]</div> 
            <div class="col-md-2 detail-box">714-555-5555</div> 
            <div class="col-md-2 detail-box">626-555-5555</div> 
           </div> 
           <div class="col-md-12"> 
            <div class="col-md-1 detail-box leftcolumn-bold">Co-Bor 2:</div> 
            <div class="col-md-1 detail-box"></div> 
            <div class="col-md-1 detail-box"></div> 
            <div class="col-md-2 detail-box"></div> 
            <div class="col-md-1 detail-box"></div> 
            <div class="col-md-2 detail-box email-text"></div> 
            <div class="col-md-2 detail-box"></div> 
            <div class="col-md-2 detail-box"></div> 
           </div> 
+0

明らかに、ブートストラップを使用していますが、間違って使用しています。 "col-xx-y"クラスは "row"クラスの中にしかありません。今度は "col-md-12"の中に "col-md-x"があります。これは、一部のブラウザでは正しく動作しない可能性があります。 – tilz0R

+0

私はそれを理解しています。私はスニペットにコードのほんの一部を掲載しました。完全なセクションはjsfiddleにあります。 詳細をご覧いただきありがとうございます。 – user61398

答えて

2

分の高さは、行に高さを追加します。

.detail-box { 
    padding: 5px; 
    overflow: auto; 
    border: 1px solid #000000; 
    text-align: center; 
    font-size:18px; 
    color:black; 
    min-height:18px; 
} 
関連する問題