Как выровнять верхние линии двух DIV?

Question

Я хочу, чтобы верхние строки двух DIV (<div></div>) были выровнены по горизонтали, как это сделать?

Answer 1

Стивен

В дополнение к T. Стоун предлагает плавать в обоих div, простой способ выровнять два div состоит в том, чтобы заставить оба иметь правило CSS display: inline-block; и дать нижнему div правило vertical-align: top; CSS.

Взгляните на этот простой jsFiddle пример, чтобы увидеть, как это работает.

div {
    display: inline-block;
}
div#tall {
    height: 4em;
}
div#short {
    height: 2em;
    vertical-align: top;
}

Answer 2

В ответ на "есть ли другой способ сделать это", конечно, вы могли бы использовать display: inline, но у вас есть куча хаков, чтобы не забыть заставить его работать в IE6 / 7. Этот способ, как правило, лучше (но все сводится к индивидуальным обстоятельствам)

<style type="text/css">
    .keeper {
        overflow: hidden; /* expand to contain floated children */
    }

    .keeper div {
       width: 200px;
       height: 30px;
       float: left;
       border-top: 1px solid red; /* so you can see the 'tops' */
    }
  </style>  
    <div class="keeper">
       <div>
       </div>
       <div>
       </div>

    </div>

Answer 3

Разместите их в контейнере.

.parent div { float: left; width: 50%; }

<div class="parent">
    <div>1</div>
    <div>2</div>
</div>

Примечание: Сумма ширины дочернего элемента div s не может превышать 100% родительского значения div, включая margin и padding.

.

Alternative

Если поддержание потока со страницей не является обязательным требованием, и все, что действительно важно, это выравнивание, то их, div всегда можно расположить абсолютно.

.abs { position: absolute; top: 100px; width: 50px; }
.left { left: 0px; }
.right { left: 50px; }

<div class="abs left">1</div>
<div class="abs right">2</div>