当浮动元素占用一些空间时,“普通”文本会腾出空间来容纳浮动元素。但普通文本周围的边框不会,而是与浮动元素相交。
在下面的示例中,如何使第一个红色框在蓝色框开始之前结束并有一些间隙,并且不重叠?并且让第二个不需要与浮动元素共享空间的红框仍然占据100%?
div#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
}
div.warn {
padding: 20px;
border: 1px solid red;
}
<div id="toc">
<h2>Table of contents</h2>
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ol>
</div>
<div id="main">
<h1>Chapter 1</h1>
<p>In the beginning ...</p>
<div class="warn">
Fairy tale, watch out!
</div>
<p>... and were married happily ever after.</p>
<div class="warn">
Don't retell!
</div>
</div>
不要使用
<div>
中的裸文本,而是坚持使用语义标记并继续使用 <p>
来表示文本。我们需要做的就是更新 CSS .warn
类以将警告显示为内联块:
#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
clear: both;
}
.warn {
display: inline-block;
padding: 20px;
border: 1px solid red;
}
<div id="toc">
<h2>Table of contents</h2>
<ol>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ol>
</div>
<div id="main">
<h1>Chapter 1</h1>
<p>In the beginning ...</p>
<p class="warn">
Fairy tale, watch out!
</p>
<p>... and were married happily ever after.</p>
<p class="warn">Don't retell!</p>
</div>