两个内联块 div 的垂直 Alignment
[英]Vertical Alignment of two inline-block divs
问题描述
我在父 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
3 个解决方案
解决方案1
2 2020-08-05 21:16:46
这是我使用的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>
解决方案2
1 已采纳 2020-08-05 21:13:43
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值。
解决方案3
0 2020-08-05 21:47:37
使用 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>
如何使 slider 内联 div（内联块不起作用）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.