HTML CSS и уровня блока элементов устанавливающиеся на верхней части блока контейнера

Так у меня есть этот кодHTML CSS и уровня блока элементов устанавливающиеся на верхней части блока контейнера

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

и если вы запускаете его, это делает средний DIV, который имеет меньше р элементов в движении вниз, там простой способ заставить его выровнять верхнюю часть с другими

источник

2009-08-16 ssmithstone

Выяснил это.

В основном центр div опускается, потому что содержимое divs становится базовым в нижней части. Посмотрите, как у них общее дно? В центре div есть еще один абзац. Добавьте еще один абзац, и проблема исчезнет. Простая фиксация:

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

Добавить вертикальный выровнять. Вероятно, он по умолчанию равен vertical-align: baseline, потому что он встроен.

Примечание:display: inline-block является only supported in FF3+, IE8+, Opera and Chrome. Альтернативная реализация с лучшей поддержкой кросс-браузера включает в себя плавание внутренних div. Это требует незначительных изменений, чтобы получить поля, которые вы хотите.

источник

2009-08-16 16:18:07 cletus

черт возьми, я пытался, чтобы на неправильном div cheers – ssmithstone

HTML CSS и уровня блока элементов устанавливающиеся на верхней части блока контейнера

ответ

Смежные вопросы