メイクのDIVタグにも

私は、これはあなたがタイトル2上の段落例えばコンテンツを削除すると、DIVは（}異なる高さに感謝メイクのDIVタグにも

.holder { 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 400px; 
 
    margin: 15px 15px; 
 
    border: 1px solid #333; 
 
}

<div class="holder"> 
 
    <div class="box"> 
 
    <h4>title 1</h4> 
 
    <p> 
 
     This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers 
 
    </p> 
 
    </div> 
 
    <div class="box"> 
 
    <h4>title 2</h4> 
 
    <p> 
 
     This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers 
 
    </p> 
 
    </div> 
 
</div>

を開始置き忘れてしまうすなわち、同じ高さで開始するようにDIVを取得するにはどうすればよいです

出典

2016-03-25 Max Njoroge

max-heightとvertical-align: top、あなたを助ける

それは、インラインブロック要素に適用されるため、vertical-align: top作品がある主な理由ディあれば。 .boxのスプレイはちょうどblockでした。うまくいきませんでした。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>height</title> 
 
\t <script src="jquery.js"></script> 
 
\t <script> 
 
\t \t $(function(){ 
 
\t \t \t 
 
\t \t }) 
 
\t </script> 
 
\t <style> 
 
\t \t .holder { 
 
\t \t width: 100%; 
 
\t \t vertical-align: top; 
 
\t \t text-align: center; 
 
\t \t } 
 
\t \t .box { 
 
\t \t display: inline-block; 
 
\t \t width: 40%; 
 
\t \t min-height: 400px; 
 
\t \t margin: 15px 15px; 
 
\t \t border: 1px solid #333; 
 
\t \t vertical-align: top; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div class="holder"> 
 
\t <div class="box"> 
 
\t  <h4>title 1</h4> 
 
\t  <p> 
 
\t  This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers 
 
\t  </p> 
 
\t </div> 
 
\t <div class="box"> 
 
\t  <h4>title 2</h4> 
 
\t  <p> 
 
\t  
 
\t  </p> 
 
\t </div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-03-25 05:53:18

完璧なあなたに感謝！ –

こんにちは、私はまた、高さは通常、要素（400px）の次元を参照することを知らせたいと思っていました。私はあなたが高さを参照したときに、要素（位置）の相対的な位置をドキュメントの上に置くことを意味したと思います。私はそれがあなたが達成しようとしていたものだと思います。また、要素の最小の高さを設定するために 'min-height'を設定し、特定の量よりも大きな高さになるように' max-height'を設定することもできます。ちょうどFYI –

クール、ええ、それは私が望んだ –

答えて

関連する問題