我有一个可能是愚蠢的问题，但我已经试图弄清楚两天了，但不能。 请帮忙。
我正在构建一个大约 100,000 字的文档。 大多数内容都是普通的旧段落，但其中一些内容，p.sent 和 p.received，格式看起来像来回发送的短信。 我的问题在于标题 h1 和 h2，以及它们如何与文本消息交互。 下面是带有 CSS 样式部分的 html 示例。 前两个标头按预期方式显示，但第三个标头被分解并穿插在文本消息中。 请告诉我我在文档的样式部分做错了什么以修复它。 我尝试过的所有位置、显示、浮动都导致了其他布局问题。
body {
background-color: ivory;
margin: 0% 5% 0% 5%;
}
h1, h2 {
color: blue;
text-align: center;
position: relative;
}
p {
color: black;
text-indent: 2%;
line-height: 1.2;
position: relative;
display: inline;
float: left;
}
.sent {
border: 1px solid;
border-radius: 10px;
display: inline-block;
position: relative;
float: right;
text-align: right;
padding: 0.125% 0.5% 0.25% 0.5%;
margin: 0.0625% 20% 0.0625% 40%;
background-color: lightblue;
text-indent: 0;
line-height: 1;
}
.received {
border: 1px solid;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
text-align: left;
padding: 0.125% 0.5% 0.25% 0.5%;
margin: 0.0625% 40% 0.0625% 20%;
background-color: lightgrey;
text-indent: 0;
line-height: 1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>---------- Part One ----------</h1>
<h2>subtitle 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et odio varius, congue elit quis, lobortis velit. Praesent ligula lorem, ullamcorper vitae mauris eu, placerat accumsan eros. Morbi in risus egestas, fringilla metus id, efficitur est. Fusce eu ipsum dapibus, iaculis nulla nec, sollicitudin leo. Pellentesque lorem tellus, suscipit nec leo eget, tristique vehicula odio. Proin congue purus auctor hendrerit mattis. Suspendisse ac enim orci. Cras nisl quam, molestie ut ligula vel, sodales imperdiet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam velit quam, elementum id orci convallis, maximus finibus diam. In auctor pellentesque eros, id venenatis nibh ornare et. Fusce urna eros, eleifend eget finibus eu, porta ut magna. Nullam vitae convallis ligula.</p>
<p>Maecenas lobortis urna eros, convallis feugiat velit tempus sit amet. Quisque euismod sed sapien et volutpat. Nam mollis risus at turpis fringilla, nec porttitor velit aliquet. Suspendisse consectetur dui vel tellus mollis, eget posuere justo consequat. Vivamus vulputate urna vitae magna gravida, interdum imperdiet tortor elementum. Curabitur finibus mauris ut lobortis elementum. Duis sollicitudin, augue id accumsan scelerisque, arcu risus tristique tellus, ut varius ligula nunc eu velit. Suspendisse sed convallis dui, eget vestibulum urna. Proin id quam vel velit eleifend semper sit amet eu felis.</p>
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla neque turpis, tincidunt et pellentesque sed, tempor quis odio. Nunc pulvinar dui nibh, sit amet placerat erat dictum vitae. Aliquam erat volutpat. Sed ut posuere tellus, quis varius tellus. Suspendisse augue orci, tristique ac eros quis, suscipit hendrerit tellus. Curabitur ac risus ac tortor malesuada pretium nec sit amet velit. Integer cursus sapien nibh, at molestie nunc vehicula sit amet. Maecenas tincidunt, mi ac congue porta, lacus quam porta ante, vel mattis mauris risus in ex. Quisque id iaculis libero. Donec at purus velit. Aliquam pretium arcu nec nunc faucibus dignissim. Nam pulvinar feugiat urna in vehicula. Curabitur vel lectus facilisis, dictum dui a, lobortis urna.</p>
<h1>---------- Part Two ----------</h1>
<h2>subtitle 2</h2>
<p>Pellentesque ultrices nulla ac aliquam lobortis. Nulla laoreet condimentum erat vitae pharetra. Pellentesque cursus ante dignissim lorem rhoncus dignissim. Ut hendrerit turpis a placerat bibendum. Sed consequat non ante a congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eleifend sem lectus, eu bibendum arcu pretium sed.</p>
<p>Nunc vitae ex malesuada, dapibus libero quis, tempor arcu. Mauris non sodales purus. Nunc iaculis ante et enim suscipit, ut pellentesque massa feugiat. Pellentesque dignissim turpis id sollicitudin bibendum. Aenean iaculis pretium tincidunt. Suspendisse potenti. Ut sed metus aliquet ex rhoncus ultricies. Aliquam eget lobortis elit. Nullam sed eros a orci blandit lacinia. Nunc rhoncus elit imperdiet luctus dignissim. Nam at finibus lorem, ut ornare mauris.</p>
<p class="sent">Hey there.</p>
<p class="received">Hey yourself. Whats up?</p>
<p class="sent">Not much. Just hanging out.</p>
<p class="sent">Do you have plans friday night?</p>
<p class="received">ikr</p>
<p class="received">This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.</p>
<p class="sent">Wow that is a long message</p>
<p class="received">ikr</p>
<p class="sent">can you say that in fewer words</p>
<p class="received">Is this better?</p>
<p class="received">Or What about this?</p>
<h1>---------- Part Three ----------</h1>
<h2>subtitle 3</h2>
<p class="received">Or I can do it this way</p>
<p class="received">Stop me</p>
<p class="sent">Yes yes thats very good</p>
<p class="sent">This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.</p>
<p class="received">:)</p>
<p class="sent">[thumbs up emoticon]</p>
<p class="received">yadda yadda yadda</p>
</body>因为您使用的是float: left所以您需要将clear: both添加到它后面显示的元素中，以更好地了解它是如何工作的，请查看此链接(CSS规则"清除：两者"有什么作用？
试试这个代码：
注意：您可能希望在第三<h1>中添加padding-top或margin-top以使其看起来更好
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: ivory;
margin: 0% 5% 0% 5%;
}
h1,
h2 {
color: blue;
text-align: center;
position: relative;
clear: both;
}
p {
color: black;
text-indent: 2%;
line-height: 1.2;
position: relative;
display: inline;
float: left;
}
.sent {
border: 1px solid;
border-radius: 10px;
display: inline-block;
position: relative;
float: right;
text-align: right;
padding: 0.125% 0.5% 0.25% 0.5%;
margin: 0.0625% 20% 0.0625% 40%;
background-color: lightblue;
text-indent: 0;
line-height: 1;
}
.received {
border: 1px solid;
border-radius: 10px;
display: inline-block;
position: relative;
float: left;
text-align: left;
padding: 0.125% 0.5% 0.25% 0.5%;
margin: 0.0625% 40% 0.0625% 20%;
background-color: lightgrey;
text-indent: 0;
line-height: 1;
}
</style>
</head>
<body>
<h1>---------- Part One ----------</h1>
<h2>subtitle 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et odio varius, congue elit quis, lobortis velit. Praesent ligula lorem, ullamcorper vitae mauris eu, placerat accumsan eros. Morbi in risus egestas, fringilla
metus id, efficitur est. Fusce eu ipsum dapibus, iaculis nulla nec, sollicitudin leo. Pellentesque lorem tellus, suscipit nec leo eget, tristique vehicula odio. Proin congue purus auctor hendrerit mattis. Suspendisse ac enim
orci. Cras nisl quam, molestie ut ligula vel, sodales imperdiet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam velit quam, elementum id orci convallis, maximus finibus diam. In
auctor pellentesque eros, id venenatis nibh ornare et. Fusce urna eros, eleifend eget finibus eu, porta ut magna. Nullam vitae convallis ligula.
</p>
<p>
Maecenas lobortis urna eros, convallis feugiat velit tempus sit amet. Quisque euismod sed sapien et volutpat. Nam mollis risus at turpis fringilla, nec porttitor velit aliquet. Suspendisse consectetur dui vel tellus mollis, eget
posuere justo consequat. Vivamus vulputate urna vitae magna gravida, interdum imperdiet tortor elementum. Curabitur finibus mauris ut lobortis elementum. Duis sollicitudin, augue id accumsan scelerisque, arcu risus tristique
tellus, ut varius ligula nunc eu velit. Suspendisse sed convallis dui, eget vestibulum urna. Proin id quam vel velit eleifend semper sit amet eu felis.
</p>
<p>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla neque turpis, tincidunt et pellentesque
sed, tempor quis odio. Nunc pulvinar dui nibh, sit amet placerat erat dictum vitae. Aliquam erat volutpat. Sed ut posuere tellus, quis varius tellus. Suspendisse augue orci, tristique ac eros quis, suscipit hendrerit tellus.
Curabitur ac risus ac tortor malesuada pretium nec sit amet velit. Integer cursus sapien nibh, at molestie nunc vehicula sit amet. Maecenas tincidunt, mi ac congue porta, lacus quam porta ante, vel mattis mauris risus in ex.
Quisque id iaculis libero. Donec at purus velit. Aliquam pretium arcu nec nunc faucibus dignissim. Nam pulvinar feugiat urna in vehicula. Curabitur vel lectus facilisis, dictum dui a, lobortis urna.
</p>
<h1>---------- Part Two ----------</h1>
<h2>subtitle 2</h2>
<p>
Pellentesque ultrices nulla ac aliquam lobortis. Nulla laoreet condimentum erat vitae pharetra. Pellentesque cursus ante dignissim lorem rhoncus dignissim. Ut hendrerit turpis a placerat bibendum. Sed consequat non ante a
congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eleifend sem lectus, eu bibendum arcu pretium sed.
</p>
<p>
Nunc vitae ex malesuada, dapibus libero quis, tempor arcu. Mauris non sodales purus. Nunc iaculis ante et enim suscipit, ut pellentesque massa feugiat. Pellentesque dignissim turpis id sollicitudin bibendum. Aenean iaculis
pretium tincidunt. Suspendisse potenti. Ut sed metus aliquet ex rhoncus ultricies. Aliquam eget lobortis elit. Nullam sed eros a orci blandit lacinia. Nunc rhoncus elit imperdiet luctus dignissim. Nam at finibus lorem, ut ornare
mauris.
</p>
<p class="sent">Hey there.</p>
<p class="received">Hey yourself. Whats up?</p>
<p class="sent">Not much. Just hanging out.</p>
<p class="sent">Do you have plans friday night?</p>
<p class="received">ikr</p>
<p class="received">
This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.
This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.
</p>
<p class="sent">Wow that is a long message</p>
<p class="received">ikr</p>
<p class="sent">can you say that in fewer words</p>
<p class="received">Is this better?</p>
<p class="received">Or What about this?</p>
<h1>---------- Part Three --------</h1>
<h2>subtitle 1</h2>
<p class="received">Or I can do it this way</p>
<p class="received">Stop me</p>
<p class="sent">Yes yes thats very good</p>
<p class="sent">
This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.
This is a long response. This is a long response. This is a long response. This is a long response. This is a long response. This is a long response.
</p>
<p class="received">:)</p>
<p class="sent">[thumbs up emoticon]</p>
<p class="received">yadda yadda yadda</p>
</body>
</html>