如何解决标题元素一直显示在同一行
我刚刚开始,我创建了这个文档,我在其中编写了一个 3x3 棋盘(是的,我知道可能有更好的方法,但这不是重点)。
在它下面我创建了一个标题元素,尽管它实际上应该显示为块元素,因此应该显示在下一行,但它以某种方式一直显示在与棋盘相同的行中。
现在,我知道我可以在我的 html 文件中使用 <br>
,但我真的很想知道这种行为的原因以及如何更优雅地改变它。
我认为它与 float: left; 有关。在我的 CSS 文件中,但我不确定。
那么请问:如何更改我的 CSS 代码以使其标题正常显示在下一行?
#checkerboard {
width: 300px;
height: 300px;
}
.checkone {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
Box-sizing: border-Box;
}
.checkone:nth-of-type(odd) {
background-color: #10e364;
}
.checkone:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
}
.checktwo {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
Box-sizing: border-Box;
}
.checktwo:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even) {
background-color: #e016ab;
border-top: none;
}
.checkthree {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
Box-sizing: border-Box;
}
.checkthree:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
border-top: none;
}
/* Now comes the important part*/
#butsection {
font-size: 15px;
}
#buthead {
font-size: 1.5em;
width: 100%;
display: block;
}
<div id="checkerboard">
<p>The checkerboard:</p>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
解决方法
你有两个问题:
- 在你的 css 中你有 #butsection 而不是 #buttonsection
- 如果一个元素可以适应浮动元素旁边的水平空间,它就会。除非您在与浮动相同的方向上将 clear 属性应用于该元素。然后元素将移动到浮动元素下方。
#checkerboard{
width: 300px;
height: 300px;
}
.checkone{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd){
background-color: #10e364;
}
.checkone:nth-of-type(even){
background-color: #e016ab;
border-right:none;
border-left:none;
}
.checktwo{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd){
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even){
background-color: #e016ab;
border-top: none;
}
.checkthree{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd){
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even){
background-color: #e016ab;
border-right:none;
border-left:none;
border-top:none;
}
/* now comes the important part*/
#buttonsection{
clear:both;
font-size: 15px;
}
#buthead{
font-size: 1.5em;
width: 100%;
display: block;
}
<div id="checkerboard">
<p>The checkerboard:</p>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
只需将 <p>The checkerboard:</p>
移出 #checkerboard
div
。
#checkerboard {
width: 300px;
height: 300px;
}
.checkone {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd) {
background-color: #10e364;
}
.checkone:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
}
.checktwo {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even) {
background-color: #e016ab;
border-top: none;
}
.checkthree {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
border-top: none;
}
/* now comes the important part*/
#butsection {
font-size: 15px;
}
#buthead {
font-size: 1.5em;
width: 100%;
display: block;
}
<p>The checkerboard:</p>
<div id="checkerboard">
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。