标题元素一直出现在同一行
Heading element keeps showing up in the same line
我刚刚开始,我创建了这个文档,其中我编写了一个 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
- 如果一个元素可以放在浮动元素旁边的水平 space 中,它就会。除非您在与浮动相同的方向上将清除 属性 应用于该元素。然后该元素将移动到浮动元素下方。
#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>
我刚刚开始,我创建了这个文档,其中我编写了一个 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
- 如果一个元素可以放在浮动元素旁边的水平 space 中,它就会。除非您在与浮动相同的方向上将清除 属性 应用于该元素。然后该元素将移动到浮动元素下方。
#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>