Выровняйте встроенные блоки DIV по верху элемента контейнера

200

Если два inline-block divэлемента имеют разную высоту, почему короткие два не совпадают с верхом контейнера? ( ДЕМО ):

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>
Развернуть фрагмент

Как я могу выровнять маленький divнаверху его контейнера?

css Юсеф
источник
или разместите их так: jsfiddle.net/RHM5L/12
AO_
Взгляните
г-н Чужой
1
применить вертикальное выравнивание: верх; для .small класса
Дипу Сасидхарен
1
я не хочу использовать поплавок. спасибо @ Mr.Alien теперь это работает :)
Юсеф

Ответы:

348

Потому что vertical-alignпо умолчанию установлено на базовом уровне .

Используйте vertical-align:topвместо этого:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Или, как сказал @ f00644, вы также можете применять floatк дочерним элементам.

Lighty_46
источник
Если я применю поплавок, у меня будут проблемы с высотой, если в контейнере есть поплавки, как в моем случае. Посмотрите здесь статью
Юсеф
1
Любая идея, почему baselineпо умолчанию? Я уверен, что есть веская причина, но непредвиденному это кажется странным. В результате вы получаете эффект горизонта Манхэттена.
Шридхар Сарнобат
Выравнивание по вертикали используется для выравнивания шрифтов, так как шрифты имеют базовую линию, просто логично, что по умолчанию разрешается базовая линия. В других случаях, подобных этому, вы должны перезаписать его.
ceed
25

Вы должны добавить vertical-alignсвойство к своим двум дочерним элементам.

Если .smallвсегда короче, вам нужно только применить свойство к .small. Однако, если любой из них может быть самым высоким, тогда вы должны применить свойство к обоим .smallи .big.

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

Выравнивание по вертикали влияет на поля встроенных ячеек или ячеек таблицы, и для этого свойства существует большое количество различных значений. Пожалуйста, смотрите https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align для более подробной информации.

michaelward82
источник
-1 
<style type="text/css">
        div {
  text-align: center;
         }

         .img1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
         }

         span{
            display: block;
         }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
  <span class='dif'></span>
  <br>
  <button>ADD</button>
</div>

<script type="text/javascript">

$('button').click(function() {
  $('.dif').html("<img/>");

})
holyghostgym
источник
Я думаю, что простое изменение свойств отображения по умолчанию для диапазона от встроенного к блоку поможет.
holyghostgym