Question

我在父div元素中有一个div列表，每个子div元素都包含一个按钮。我想在每个第四个子div元素之后添加一个换行符

<div class="btn-container">
    <div class="btn-div"><button class="btn">+</button></div>
    <div class="btn-div"><button class="btn">-</button></div>
    <div class="btn-div"><button class="btn">*</button></div>
    <div class="btn-div"><button class="btn">/</button></div>
    <div class="btn-div"><button class="btn">7</button></div>
    <div class="btn-div"><button class="btn">8</button></div>
    <div class="btn-div"><button class="btn">9</button></div>
    <div class="btn-div"><button class="btn">C</button></div>
    <div class="btn-div"><button class="btn">4</button></div>
    <div class="btn-div"><button class="btn">5</button></div>
    <div class="btn-div"><button class="btn">6</button></div>
    <div class="btn-div"><button class="btn">%</button></div>
    <div class="btn-div"><button class="btn">1</button></div>
    <div class="btn-div"><button class="btn">2</button></div>
    <div class="btn-div"><button class="btn">3</button></div>
    <div class="btn-div"><button class="btn">=</button></div>
</div>

我如何在CSS中做到这一点？我尝试过

.btn{
  height: 5em;
  width: 5em;

}

 .btn-div{
  display: inline-block;

}

.btn-container div:nth-of-type(4n)::after{
  content: '\A';
  display: block;
  height: 2em;
  width: 2em;

}

Answer 1

使用float添加此CSS

.btn-container div{
  float:left;
}
.btn-container div:nth-child(4n){
    float:none;
    height:2em;
}

<div class="btn-container">
    <div class="btn-div"><button class="btn">+</button></div>
    <div class="btn-div"><button class="btn">-</button></div>
    <div class="btn-div"><button class="btn">*</button></div>
    <div class="btn-div"><button class="btn">/</button></div>
    <div class="btn-div"><button class="btn">7</button></div>
    <div class="btn-div"><button class="btn">8</button></div>
    <div class="btn-div"><button class="btn">9</button></div>
    <div class="btn-div"><button class="btn">C</button></div>
    <div class="btn-div"><button class="btn">4</button></div>
    <div class="btn-div"><button class="btn">5</button></div>
    <div class="btn-div"><button class="btn">6</button></div>
    <div class="btn-div"><button class="btn">%</button></div>
    <div class="btn-div"><button class="btn">1</button></div>
    <div class="btn-div"><button class="btn">2</button></div>
    <div class="btn-div"><button class="btn">3</button></div>
    <div class="btn-div"><button class="btn">=</button></div>
</div>

Answer 2

您提供的代码似乎可以在JSFiddle上运行

.btn-container div:nth-of-type(4n)::after{
    content: '\A';
    display: block;
    height: 2em;
    width: 2em;
}

https://jsfiddle.net/vg089jhr/

您得到什么结果？是否可以正确读取CSS文件？

Answer 3

最简单的方法是使用<br>代码，例如，它会在第一个div之前换行/添加一行：

<div class="btn-div"><button class="btn">+</button></div> <br> <div class="btn-div"><button class="btn">-</button></div>

在div元素后添加换行符

3 个答案: