Question

我刚刚开始，我创建了这个文档，我在其中编写了一个 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>

Answer 1

你有两个问题：

在你的 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>

Answer 2

只需将 <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>

代码笔：https://codepen.io/manaskhandelwal1/pen/mdOJGRM

标题元素一直显示在同一行

2 个答案: