时间戳

首页 > 解决方案 > 标题元素一直显示在同一行

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

问题描述

我刚刚开始，我创建了这个文档，我在其中编写了一个 3x3 棋盘格（是的，我知道可能有更好的方法来做到这一点，但这不是重点）。

在它下面我创建了一个标题元素，它以某种方式一直显示在与棋盘格相同的行中，即使它实际上应该显示为块元素，因此应该显示在下一行。

现在，我知道我可以<br>在我的 html 文件中使用，但我真的很想知道这种行为的原因以及如何更优雅地更改它。我认为它与浮动有关：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>

标签： htmlcsspositioncss-float

解决方案

你有两个问题：

  1. 在你的CSS中你有#butsection而不是#buttonsection
  2. 如果一个元素可以适合浮动元素旁边的水平空间，它会。除非您以与浮动相同的方向将 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>

推荐阅读