2016-03-25 20 views
0

nasıl başlığa 2 paragrafında örn içeriği sildiğinizde aynı yükseklikte kısmında yani başlatmak için bu DIV alırım, DIV yanlış olur (farklı yüksekliklerde başlamak} sayesindeYap DIV etiketleri bile

.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>

cevap

2

max-height ve vertical-align: top; size yardımcı olacaktır

bir satır içi blok elemanı uygulanır çünkü vertical-align: top eser olmasının temel nedeni di edin.. .box üzerindeki splay yalnızca block idi, işe yaramazdı.

<!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>

+1

mükemmel teşekkür ederim! –

+0

Merhaba, ayrıca yüksekliğin genellikle bir öğenin boyutuna (400px) yönlendirildiğini de belirtmek istedim. Yüksekliğe atıfta bulunduğunuzda, belgeye göre elemanın (konumun) en üst pozisyonunu kastettiğinizi düşünüyorum. Bence başarmaya çalıştığın şey bu. Ayrıca, "min-height" değerini, elemanın minimum yüksekliğini ve "max-height" değerini ayarlamak için ayarlayabilirsiniz, böylece konteyner, belirli bir miktardan daha büyük bir yükseklik olamaz. Sadece bir FYI –

+0

havalı, evet istediğim buydu –