gpt4 book ai didi

html - 如何在同一行显示包含多行的两个div

转载 作者:太空宇宙 更新时间:2023-11-04 15:44:28 25 4
gpt4 key购买 nike

我试图在同一行显示两个 div,但其中一个包含多行,因此第二个 div 的文本在第一个 div 的最后一行之后开始。

.contact1 {
display: inline;
}
<html>
<body>
<div id="test">
<div class="contact1"><h3 class="contact1"><br>Text1<br>
Text2<br>Text3</h3></div>
<div class="contact1"><h3 class="contact1">test</h3></div>
</div>
</body>
</html>

这是结果:

但我希望“test”在第一行的第一行旁边开始,像这样:

我会尝试使用 topbottom 属性移动它,但我认为这不是最佳解决方案,因为我认为它在观看网站时可能会显示不同来自不同的屏幕(主要是通过手机观看时)。

有什么办法可以实现吗?

最佳答案

使用Flexbox将您的 .contact1 元素放入行或列中。
您可以通过更改 align-items 属性来控制行或列中元素的对齐方式。现在它被设置为 flex-start ,这意味着在行的顶部对齐。

#test {
display: flex;
align-items: flex-start;
}
<html>

<body>
<div id="test">
<div class="contact1">
<h3>Text1<br> Text2 <br>Text3</h3>
</div>
<div class="contact1">
<h3>test</h3>
</div>
</div>
</body>

</html>

检查 this post of CSSTricks了解您可以使用 Flexbox 做什么。

关于html - 如何在同一行显示包含多行的两个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57645191/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com