CSS - Inline divs Größe

Question

Ich habe 4 Divs.

1 - Divs '.left' und '.right' sollten 150px min. ->OK

2 - Divs '.middle1' und' .middle2' sollte die verbleibende mit erhalten, indem ihnen geteilt. ->NICHT OK

Warum habe ich ein Leerzeichen zwischen '.middle2' und '.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

nicht sicher, wie tun Sie statt das Spiel mit Float der angezeigt werden soll, können Sie Anzeige verwenden: flex die gleiche

Kontrolle zu erreichen, die unter Snippet

.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>

Hoffe es hilft

Answer 2

Hallo, das ist nicht der beste Weg, dies zu tun.

Sie sollten ein div mit drei Abschnitten davon machen und die mittlere in zwei Abschnitte unterteilen.

Also im Grunde die Struktur, die Sie brauchen, ist

Div> 3 Spalten und dann die mittlere Spalte hat zwei Spalten conatined.

Allerdings ist hier eine schnelle Lösung für Ihr Code: - Bewerben float:right-.middle2 - Befestigen Sie die Breite percetage für .middle1 und .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; 
}