Wie automatisiert man die Breite von drei Divs, um in Container zu passen?

Question

Ich habe ein einzelnes div, das eine Breite von 100% hat. Wenn die Größe des Browsers geändert wird, wird die div-Größe so geändert, dass sie 100% der Browserbreite bleibt. Innerhalb dieses Divs gibt es drei weitere Divs mit einer Breite von 200px. Wenn der Browser 600 px breit ist, dann sind alle Divs nebeneinander, so wie ich es will. Aber wenn Sie den Browser auf 599px oder weniger dehnen, werden ein oder zwei divs um eine Zeile abgerissen und erscheinen unter den anderen divs, was nicht ideal ist.

Also was ich will ist, dass die divs immer Seite an Seite bleiben und ebenso in der Breite ändern. Wenn ich zum Beispiel die Browserbreite auf 150px ändere, haben die drei divs, die alle nebeneinander liegen, jeweils eine Breite von 50px.

Ist dies nur mit CSS und HTML-Code möglich? Ich denke nicht, dass ich meinen Code sehen muss, da es nur drei Divs innerhalb eines anderen Divs gibt.

Answer 1

Sie können diese Einstellungen auf Ihre drei DIVs anwenden.

.my_div { 
    width: 33%; 
    max-width: 200px; 
} 

Dies wird die drei DIVs passen in immer den Behälter (33% Breite) stellen Sie sicher, wird aber nie breiter als 200px jeder, auch erhalten, wenn der Behälter als 600px viel breiter ist.

Answer 2

Sie können es mit dem Flexbox:

* {margin:0;padding:0;box-sizing:border-box} 
 

 
.parent { 
 
    display: flex; /* displays children inline */ 
 
} 
 

 
.child { 
 
    flex: 0 1 200px; 
 
    text-align: center; 
 
} 
 

 
.red {background: #f00} 
 
.green {background: #0f0} 
 
.blue {background: #00f}

<div class="parent"> 
 
    <div class="child red">Red</div> 
 
    <div class="child green">Green</div> 
 
    <div class="child blue">Blue</div> 
 
</div>

Answer 3

.parent { 
 
    display: block; 
 
} 
 
.child{ 
 
    width: 32.5%; 
 
    border:1px solid red; 
 
    float:left; 
 
}

<div class="parent"> 
 
    <div class="child">One</div> 
 
    <div class="child">Two</div> 
 
    <div class="child">Three</div> 
 
</div>