CSS - インラインdivsサイズ

Question

私は4つのdivを持っています。

1 - Divs '.left'と'right 'は150px分である必要があります。 - >OK

2 - divを '.middle1' と' .middle2' はそれらで割っ で残りを取得する必要があります。 - >NOT OK

なぜ「.middle2」と「.right」の間に空白がありますか？

.container { 
 
    width: 100%; 
 
    display: table;  
 
} 
 
.left { 
 
    float: left; 
 
    display: table-cell; 
 
    padding: 0; 
 
    background-color: red; 
 
    height: 30px; 
 
    width: 15%; 
 
    min-width:150px; 
 
} 
 
.middle1 { 
 
    float: left; 
 
    display: table-cell; 
 
    padding: 0; 
 
    background-color: blue; 
 
    height: 30px; 
 
    width: 35%; 
 
} 
 
.middle2 { 
 
    float: left; 
 
    display: table-cell; 
 
    padding: 0; 
 
    background-color: grey; 
 
    height: 30px; 
 
    width: 35%; 
 
} 
 
.right { 
 
    display: table-cell; 
 
    background-color: green; 
 
    height: 30px; 
 
    width: 15%; 
 
    min-width:150px;  
 
} 
 
input { 
 
    margin:5px; 
 
    width:100px; 
 
    background: #FFF; 
 
} 
 
.list{ 
 
    margin: 0 2px; 
 
    color: #FFF; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <input type="text"> 
 
    <span class="list">list</span> 
 
    </div> 
 
    <div class="middle1"></div> 
 
    <div class="middle2"></div> 
 
    <div class="right"></div> 
 
</div>

Answer 1

あなたは、ディスプレイを使用することができ、代わりにフロートので遊んで を表示したいですかわからない：以下のスニペット同じ

チェックを達成するために曲げる

.container { 
 
display:flex; 
 
} 
 
.left { 
 
    
 
    padding: 0; 
 
    background-color: red; 
 
    height: 30px; 
 
    width: 15%; 
 
    min-width:150px; 
 
} 
 
.middle1 { 
 
    
 
    padding: 0; 
 
    background-color: blue; 
 
    height: 30px; 
 
    width: 35%; 
 
} 
 
.middle2 { 
 
    
 
    padding: 0; 
 
    background-color: grey; 
 
    height: 30px; 
 
    width: 35%; 
 
} 
 
.right { 
 
    
 
    background-color: green; 
 
    height: 30px; 
 
    width: 15%; 
 
    min-width:150px;  
 
} 
 
input { 
 
    margin:5px; 
 
    width:100px; 
 
    background: #FFF; 
 
} 
 
.list{ 
 
    margin: 0 2px; 
 
    color: #FFF; 
 
}

<div class="container"> 
 
    <div class="left"> 
 
    <input type="text"> 
 
    <span class="list">list</span> 
 
    </div> 
 
    <div class="middle1">m1</div> 
 
    <div class="middle2">m2</div> 
 
    <div class="right">right</div> 
 
</div>

希望します。

Answer 2

こんにちは、これは最良の方法ではありません。

divを3つのセクションで作成し、中間のセクションを2つのセクションに分割する必要があります。

だから基本的にはあなたが必要とする構造が

div>の3列で、その後、中央の列はconatined 2つの列があります。

しかし、ここにあなたのコードのための簡単な修正は次のとおりです。 - .middle2 にfloat:rightを適用する - あなたがそれらを表示したいんか.middle1と.middle2

.container { 
    width: 100%; 
    display: table;  
} 
.left { 
    float: left; 
    display: table-cell; 
    padding: 0; 
    background-color: red; 
    height: 30px; 
    width: 15%; 
    min-width:150px; 
} 
.middle1 { 
    float: left; 
    display: table-cell; 
    padding: 0; 
    background-color: blue; 
    height: 30px; 
    width: 31%; 
} 
.middle2 { 
    float: right; 
    display: table-cell; 
    padding: 0; 
    background-color: grey; 
    height: 30px; 
    width: 31%; 
} 
.right { 
    display: table-cell; 
    background-color: green; 
    height: 30px; 
    width: 15%; 
    min-width:150px;  
} 
input { 
    margin:5px; 
    width:100px; 
    background: #FFF; 
} 
.list{ 
    margin: 0 2px; 
    color: #FFF; 
}