Question

我在父div内有两个div，两个子div都显示：inline-block。我想这样做，所以左侧的第一个div是vertical-align：top，而第二个div是vertical-align：bottom，但是我也想限制第二个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

Answer 1

这是我使用过的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>

Answer 2

第二个div上的

PUT可以对此进行近似

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

在需要额外包装的地方使用float的另一种技巧：

<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 */
}

另一个带有CSS网格的

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

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

Answer 3

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

两个内联块div的垂直对齐

3 个答案: