Вертикальное выравнивание двух встроенных блоков div - PullRequest
Новая
       6

Вертикальное выравнивание двух встроенных блоков div

3 голосов
/ 05 августа 2020

У меня есть два div внутри родительского div, и оба дочерних div отображаются: inline-block. Я хотел бы сделать так, чтобы первый div слева был vertical-align: top, а второй div - vertical-align: bottom, но я также хочу ограничить второй div, чтобы первая строка текстовых строк была вверху последняя строка текста первого div и расширяется вниз, увеличивая высоту родительского div, а не вверх. Как я могу выполнить sh это?

Например, если у меня что-то вроде этого: 

<html>

<body>
<div>
 <div id="d1" style="width: 50px;display:inline-block;vertical-align:top;">
Here is some text
 </div>
 <div id="d2" style="width: 50px;display:inline-block;vertical-align:bottom;">
Here is some other text
 </div>
</div>
</body>

</html>

Я хочу, чтобы первая строка d2 соответствовала последней строке d1. Это будет выглядеть примерно так: 

Here
is
some
text Here
     is
     some
     other
     text

Ответы [ 3 ]

2 голосов
/ 06 августа 2020

Вот тот, который я использовал grid макет 

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 55px 20px 55px;
  width: 65px;
}

#d2 {
  grid-row: 2;
  grid-column: 2;
}
<div class="container">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>
1 голос
/ 06 августа 2020

vertical-align: text-top; во втором div может приблизительно соответствовать этому 

#d1 {
  width: 50px;
  display: inline-block;
  vertical-align: 0.1em; /* rectify the alignment*/
}

#d2 {
  width: 50px;
  display: inline-block;
  vertical-align: text-top;
}
<div style="border:1px solid red;">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

<div style="border:1px solid red;font-size:20px;">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

Еще один трюк с использованием float, где вам нужна дополнительная оболочка: 

#d1 {
  width: 50px;
  display: inline-block;
  vertical-align: 0.1em;
}

#d2 {
  width: 50px;
  display: inline-block;
}

#d2:before {
  content: "";
  display: inline-block;
}

#d2>span {
  float: left;
}
<div style="border:1px solid red;">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    <span>Here is some other text</span>
  </div>
</div>

<div style="border:1px solid red;font-size:20px">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    <span>Here is some other text</span>
  </div>
</div>

Еще одна идея, если ширина всегда известна и фиксирована: 

.container {
  border: 1px solid red;
  line-height:1.2em;
}

#d1 {
  width: 50px;
}

#d2 {
  width: 50px;
  margin-top: -1.1em;
  transform: translate(50px); /* the width of the first div */
}
<div class="container">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

<div class="container" style="font-size:20px">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

Другой с сеткой CSS 

.container {
  border: 1px solid red;
  line-height:1.2em;
  display:grid;
  grid-template-rows:auto 1.1em auto;
  justify-content:flex-start;
}
.container > * {
  width: 50px;
  grid-row-end:span 2;
}

#d2 {
  width: 50px;
  grid-column:2;
  grid-row-start:2;
}
<div class="container">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

<div class="container" style="font-size:20px">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

Во всех приведенных выше решениях вам может потребоваться отрегулировать значения em в зависимости от используемого шрифта.

0 голосов
/ 06 августа 2020

Используйте JS

var d1Height = document.getElementById("d1").offsetHeight;

document.getElementById("d2").style.marginTop = d1Height-17 + "px"; 
#d1, #d2 {
    width:50px;
    display: inline-block;
}

#d1 { vertical-align:top; }
<html>

<body>
<div>
 <div id="d1">
Here is some text
 </div>
 <div id="d2">
Here is some other text
 </div>
</div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...