フレックスボックス行スパン

Question

は、私は、この使用して、フレックス方向のためのいくつかのソリューションを見てきました：列が、それは全体のフレックスコンテナのためでした。私は既に行方向のコンテナを持っていて、レイアウト全体を変更せずに2行のdivを作成できるかどうかを知りたがっています。ここに私の現在の状況があります。

私は等号でのdivで空白の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ボタンと1の両方を追加する必要があり、これらの2つのルール（とマークアップへ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; 
} 

注意を追加しますその上に。

スタックは、もう一つの方法は、3/2/1/0/.をラップ/及び/=/2グループに分け、作ることです

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>

---

スニペットそれらのラッパーは行コンテナをフレックスし、次に幅/残りのボタンとマージする余白です。遅れて申し訳ありません