两个内联块级div的垂直对齐

Question

两个内联块级div的垂直对齐

3

我有一个父级div，里面有两个子div，两个子div都设置为display: inline-block。我希望左边的第一个div垂直对齐到顶部，而右边的第二个div垂直对齐到底部，但是我还想让第二个div的第一行文本与第一个div的最后一行文本对齐，并向下增加父div的高度而不是向上。我该如何实现？

例如，如果我有这样的东西：

<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

- MaddawgX9

请提供代码，哈哈 :D - Marko

3个回答

1

第二个div上的vertical-align: text-top;可以近似实现此效果。

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

当你需要一个额外的包装器时，可以使用浮动的另一种技巧：

#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值。

- Temani Afif

1

这些并不真正对齐。 - DCR

@DCR 这就是为什么我说“大约”的原因。 - Temani Afif

谢谢，第一个例子就是我要找的。 - MaddawgX9

0

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

- Marko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Umutambyi Gad · Accepted Answer

这里是我使用的网格布局

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