gpt4 book ai didi

html - 我在外部 div 内水平放置了 2 个 div。当第 2 个内部 div 的内容变长时,它应该包裹在自己的 div 区域

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

外层: InnerDiv1 InnerDiv2.

InnerDiv1 和 InnerDiv2 在 Outer div 内并排。

现在,如果 InnerDiv2 的文本很长,那么它应该换行并下降,但起点应该是 InnerDiv2 的第一个字符。

    <html>
<head>
<style>
.coverageDetailsOuterAHX {
display: inline-block;
margin-right: 2%;
width: 317px;
white-space:nowrap;
}
.coverageDetailsInnerAHX {
display: inline-block;
float: none;
margin-right: 2%;
white-space:nowrap;
}
.coverageDetailsAHX{
display: inline-block;
float:none;
margin-right: 2%;
white-space:wrap;
}
</style>
</head>
<body>
<div class= "coverageDetailsOuterAHX">
<div class= "coverageDetailsInnerAHX">
<p>All Coverage Details.</p>
</div>
<div class= "coverageDetailsAHX" >
<p>Learn more about CareFirst. Text is longer. Can accomodate
more characters.</p>
</div>
</div>
</body>
</html>

结果应该是:

All Coverage Details. Learn more about.CareFirst. Text is longer. Can
accomodate more characters.

最佳答案

Flexbox 可以做到这一点。

.coverageDetailsOuterAHX {
display: flex;
}

.coverageDetailsOuterAHX div {
border: 1px solid green;
}

.coverageDetailsInnerAHX {
flex: 0 0 auto;
}
<div class="coverageDetailsOuterAHX">

<div class="coverageDetailsInnerAHX">

<p>All Coverage Details.</p>
</div>

<div class="coverageDetailsAHX">

<p>Learn more about CareFirst. Text is longer. Can accomodate more characters.</p>
</div>

</div>

关于html - 我在外部 div 内水平放置了 2 个 div。当第 2 个内部 div 的内容变长时,它应该包裹在自己的 div 区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56988604/

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