Html 当div保持在同一位置时，如何在div中包装文本？

我制作了一个简单版本的代码：

.box{
边框：1px纯黑；
}
.首先{
浮动：左；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px；
}
.第二{
浮动：左；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px；
}
.清楚{
明确：两者皆有；
}

用户名
这是一条短消息
用户名
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”
除非偶尔出于不谨慎的原因，否则不应因工作过失而受到惩罚。”
用户名
消息

您需要为两个div设置宽度以实现此目的

enter code here

---

设置.first和.second的宽度

<div class="box first">Username</div>
<div class="box second">This is a short message</div>
<div class="clear"></div>

<div class="box first">Username</div>
<div class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="clear"></div>

<div class="box first">Username</div>
<div class="box second">Message</div>
<div class="clear"></div>
<style>
.box {
    border: 1px solid black;
}
.first {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
    width:20%;
}
.second {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
    width:60%;
}
.clear{
    clear: both;
}
</style>

用户名
这是一条短消息
用户名
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”
用户名
消息
.盒子{
边框：1px纯黑；
}
.首先{
浮动：左；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px；
宽度：20%；
}
.第二{
浮动：左；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px；
宽度：60%；
}
.清楚{
明确：两者皆有；
}

---

div需要的宽度，否则它将占据可用区域的100%

.盒子{
边框：1px纯黑；
}
.首先{
浮动：左；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px；
}
.第二{
浮动：左；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px；
/*加宽*/
宽度：250px；
}
.清楚{
明确：两者皆有；
}
用户名
这是一条短消息
用户名
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”
用户名
消息

我刚刚更新了css类，你能试试这个吗

.second {
float: left;
color: #0000FF;
font-weight: bold;
padding: 0 20px;
width:250px;
}

选择1 在当前结构中，如果不设置宽度，则无法执行此操作。但是，您可以通过仅设置1个宽度来实现这一点

如果为

.first

设置宽度、绝对位置，并为

.second

设置填充以适合

.first

-div，则可以解决此问题，同时保持

.second

流畅

.box{
边框：1px纯黑；
}
.行{
位置：相对位置；
}
.首先{
位置：绝对位置；
左：0；
排名：0；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px；
宽度：80px；
}
.第二{
框大小：边框框；
宽度：100%；
颜色：#0000FF；
字体大小：粗体；
填充：0 20px 0 140px；
}
.清楚{
明确：两者皆有；
}

用户名
这是一条短消息
用户名
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”有时，如果你不自以为是，就必须为自己的行为负责。”
用户名
消息

设置

第一个
和
第二个
的宽度。还有，为什么不干脆用一张桌子来做你在那里做的事情呢？看起来很简单。我不想添加特定的宽度，因为我使用的是引导，它需要根据内容而定。如果不想在此类上添加宽度，请使用引导[col lg etc]类作为宽度。因为如果没有在这个div上设置width，那么这个方法的问题是：它被广泛支持。缺点：这是一张桌子。对的谢谢你的回答。。这就解决了目前的问题。