HTML CSS und Block-Level-Elemente an der Spitze eines Blockbehälter ausrichten

So habe ich diesen CodeHTML CSS und Block-Level-Elemente an der Spitze eines Blockbehälter ausrichten

<html> 
<head> 
    <style type="text/css"> 
    div.one { border:1px solid black; text-align:center; padding:.2em; height:300px; 
    } 

    div.one div {display:inline-block; height:100%;} 
    </style> 
</head> 
<body> 

<div class="one"> 

    <div style="border:1px solid red; width:40%"> 

    <h3>1st div</h3> 
    <p>line #1</p> 
    <p>line #2</p> 
    <p>line #3</p> 
    <p>line #4</p> 
    </div> 

    <div style="margin:0 .2em; width:16%; border:1px solid red;"> 

    <h3>2nd div</h3> 
    <p>line #1</p> 
    <p>line #2</p> 
    <p>line #3</p> 
    </div> 

    <div style="border:1px solid red; width:40%;"> 

    <h3>3rd div</h3> 
    <p>line #1</p> 
    <p>line #2</p> 
    <p>line #3</p> 
    <p>line #4</p> 

    </div> 

</div> 

</body> 
</html>

und wenn Sie es laufen, macht es die Mitte div, die nach unten weniger p Elemente in Bewegung hat, gibt es ein einfacher Weg, um es mit den anderen nach oben auszurichten

Quelle

2009-08-16 ssmithstone

Ich habe es herausgefunden.

Grundsätzlich wird das center-div abgesenkt, weil der Inhalt der divs unten am Grundlinienwert angezeigt wird. Sehen Sie, wie sie einen gemeinsamen Boden haben? Das zentrale div hat einen Absatz weniger. Fügen Sie einen weiteren Absatz hinzu und das Problem verschwindet. Einfache Behebung:

div.one div {display: inline-block; height:100%; vertical-align: top;}

Fügen Sie eine vertikale Ausrichtung hinzu. Es ist wahrscheinlich auf vertical-align: baseline voreingestellt, weil es inline ist.

Hinweis:display: inline-block ist only supported in FF3+, IE8+, Opera and Chrome. Eine alternative Implementierung mit besserer browserübergreifender Unterstützung beinhaltet das Floaten der inneren divs. Dies erfordert geringfügige Änderungen, um die gewünschten Ränder zu erhalten.

Quelle

2009-08-16 16:18:07 cletus

Verdammt, ich versuchte das auf die falschen div cheers – ssmithstone

HTML CSS und Block-Level-Elemente an der Spitze eines Blockbehälter ausrichten

Antwort

Verwandte Themen