柔性盒行跨度

Question

我已经看到了一些使用flex-direction：column的解决方案，但是这是针对整个柔性容器的。我已经有一个行方向的容器，并想知道如果我可以在不改变整个布局的情况下制作两行的div。这是我目前的情况。

我想空白格用等号股利相结合。这也是我的代码。非常感谢！

<div class="container"> 
    <div class="headline"> 
     JSCalc 
    </div> 
    <div class="display"> 
    </div> 
    <div class="button-container"> 
     <div class="ac all-rows row1 clear">AC</div> 
     <div class="ce all-rows row1 clear">CE</div> 
     <div class="divide all-rows row1">&divide;</div> 
     <div class="multiply all-rows row1">&times;</div> 

     <div class="seven all-rows">7</div> 
     <div class="eight all-rows">8</div> 
     <div class="nine all-rows">9</div> 
     <div class="subtract all-rows">-</div> 

     <div class="four all-rows">4</div> 
     <div class="five all-rows">5</div> 
     <div class="six all-rows">6</div> 
     <div class="addition all-rows">+</div> 

     <div class="three all-rows">3</div> 
     <div class="two all-rows">2</div> 
     <div class="one all-rows">1</div> 
     <div class="all-rows"> 
     </div> 


     <div class="zero all-rows">0</div> 
     <div class="decimal all-rows">.</div> 
     <div class="all-rows">=</div> 
    </div> 
</div> 

---

CSS：

html { 
background-color: #333; 
} 

.container { 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 20rem; 
    height: 30rem; 
    background-color: #f0f0f0; 
    border-radius: 3%; 
} 

.headline { 
    width: 100%; 
    height: 5%; 
    text-align: center; 
    font-size: 1.5rem; 
    margin-top: 1%; 
} 

.display { 
    height: 20%; 
    width: 80%; 
    margin: 0 auto; 
    background-color: #DFE2DB; 
    margin-top: 5%; 
    border: 2px solid #c6cbbf; 
    border-radius: 5%; 
} 

.button-container { 
    height: 75%; 
    width: 100%; 
    display: flex; 
    justify-content: space-around; 
    align-content: flex-start; 
    flex-wrap: wrap; 
} 

.all-rows { 
    width: 22%; 
    background-color: #c6c6c6; 
    height: 3.5rem; 
    display: inline-block; 
    margin: 1% 0 1% 0; 
    border-radius: 5%; 
    font-size: 2em; 
    text-align: center; 
    line-height: 3.5rem; 
    vertical-align: bottom; 
} 

.row1 { 
    margin-top: 5%; 
} 

.clear { 
    background-color: #e19ba2; 
} 

.zero { 
    width: 47%; 
} 

.decimal { 
    flex-grow: 0; 
    width: 22%; 
} 

Answer 1

最简单的解决方案是使用伪，弥合两个，视觉。

添加这条规则（和equal类的标记）

.equal { 
    position: relative; 
} 
.equal::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 90%;   /* start 10% below the top to cover the rounded border */ 
    height: 100%; 
    background: inherit; 
} 

注意，当您添加的事件，你需要添加“等于”事件到两个equal按钮和一个它上面。

堆栈片断

html { 
 
background-color: #333; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 20rem; 
 
    height: 30rem; 
 
    background-color: #f0f0f0; 
 
    border-radius: 3%; 
 
} 
 

 
.headline { 
 
    width: 100%; 
 
    height: 5%; 
 
    text-align: center; 
 
    font-size: 1.5rem; 
 
    margin-top: 1%; 
 
} 
 

 
.display { 
 
    height: 20%; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background-color: #DFE2DB; 
 
    margin-top: 5%; 
 
    border: 2px solid #c6cbbf; 
 
    border-radius: 5%; 
 
} 
 

 
.button-container { 
 
    height: 75%; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-content: flex-start; 
 
    flex-wrap: wrap; 
 
} 
 

 
.all-rows { 
 
    width: 22%; 
 
    background-color: #c6c6c6; 
 
    height: 3.5rem; 
 
    display: inline-block; 
 
    margin: 1% 0 1% 0; 
 
    border-radius: 5%; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    line-height: 3.5rem; 
 
    vertical-align: bottom; 
 
} 
 

 
.row1 { 
 
    margin-top: 5%; 
 
} 
 

 
.clear { 
 
    background-color: #e19ba2; 
 
} 
 

 
.zero { 
 
    width: 47%; 
 
} 
 

 
.decimal { 
 
    flex-grow: 0; 
 
    width: 22%; 
 
} 
 

 
.equal { 
 
    position: relative; 
 
} 
 
.equal::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 90%;   /* start 10% below the top to cover the rounded border */ 
 
    height: 100%; 
 
    background: inherit; 
 
}

<div class="container"> 
 
    <div class="headline"> 
 
     JSCalc 
 
    </div> 
 
    <div class="display"> 
 
    </div> 
 
    <div class="button-container"> 
 
     <div class="ac all-rows row1 clear">AC</div> 
 
     <div class="ce all-rows row1 clear">CE</div> 
 
     <div class="divide all-rows row1">&divide;</div> 
 
     <div class="multiply all-rows row1">&times;</div> 
 

 
     <div class="seven all-rows">7</div> 
 
     <div class="eight all-rows">8</div> 
 
     <div class="nine all-rows">9</div> 
 
     <div class="subtract all-rows">-</div> 
 

 
     <div class="four all-rows">4</div> 
 
     <div class="five all-rows">5</div> 
 
     <div class="six all-rows">6</div> 
 
     <div class="addition all-rows">+</div> 
 

 
     <div class="three all-rows">3</div> 
 
     <div class="two all-rows">2</div> 
 
     <div class="one all-rows">1</div> 
 
     <div class="all-rows"></div> 
 

 
     <div class="zero all-rows">0</div> 
 
     <div class="decimal all-rows">.</div> 
 
     <div class="all-rows equal">=</div> 
 

 
    </div> 
 
</div>

---

的另一种方法是将3/2/1/0/. /和/= /包分成2组，使这些包装器会弯曲行容器，然后调整宽度的/边际的匹配其余的按钮。