css div arrangement mit float und width

Ich bin sehr neu in HTML und CSS, aber bitte bare mit mir hier. Was ich versuche zu erreichen, ist, dass der erste Div den ganzen Weg bis zum rechten Ende des Bildschirms gehen wird, was in Ordnung ist, aber wenn ich versuche, teilen sich die make 3 Divs die gleiche Zeile nebeneinander Ich versuche 3 von ihnen mit float zu setzen und ihre Breite 33% zu machen. Was passiert, ist, dass nur 2 der Divs dieselbe Zeile teilen und dass das dritte Div unter diese 2 Divs geht. Sie richten sich nur aus, wenn ich Breite und Float auf jedes Div setze. Ich habe versucht, den Float und die Breite mit 3 auf einmal anzuwenden, aber es wird nicht funktionieren, ich habe irgendwo versagt und bin irgendwie verwirrt über das Verhalten der Divs.css div arrangement mit float und width

Hier ist mein HTML:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title> 
     practice webpage 
     </title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="banner"> 
      contents 
      </div> 
      <div class="menu1">i am menu 1</div> 
      <div class="menu2">i am menu 2</div> 
      <div class="menu3">i am menu 3</div> 
     </div> 
    </body> 
</html>

CSS:

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

.banner{ 
background-color: aqua; 
} 

.menu1, menu2, menu3 { 
float: left; 
width: 33%; 
} 

.menu1{ 
background-color: crimson; 
} 

.menu2{ 
background-color: blueviolet; 
} 

.menu3{ 
background-color: darkorange; 
}

Quelle

2017-01-05 smiling

Es ist ein Tippfehler. Es sollte '.menu1, .menu2, .menu3' –

Sie vermissen die '.' vor den Kursen in '.menu1, menu2, menu3 {' sollte 'sein.menu1, .menu2, .menu3 {' –

Sie haben Punkte zu Klassen anhängen, wenn CSS zu schreiben.

aktualisieren Hier Code:

.menu1, 
.menu2, 
.menu3 { 
    float: left; 
    width: 33%; 
}

prüfen aktualisiert Geige: https://jsfiddle.net/nashcheez/0qg1hhcj/

Ich denke, das ist das, was Sie wollen:

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
.banner { 
 
    background-color: aqua; 
 
} 
 
.menu1, 
 
.menu2, 
 
.menu3 { 
 
    float: left; 
 
    width: 33%; 
 
} 
 
.menu1 { 
 
    background-color: crimson; 
 
} 
 
.menu2 { 
 
    background-color: blueviolet; 
 
} 
 
.menu3 { 
 
    background-color: darkorange; 
 
}

<div class="container"> 
 
    <div class="banner"> 
 
    contents 
 
    </div> 
 
    <div class="menu1">i am menu 1</div> 
 
    <div class="menu2">i am menu 2</div> 
 
    <div class="menu3">i am menu 3</div> 
 
</div>

Quelle

2017-01-05 09:24:40 nashcheez

Es liegt daran, dass in Sie habengeschriebenanstelle von .menu1, .menu2, .menu3. Bitte sehen Sie diese example.

Quelle

2017-01-05 09:25:55

css div arrangement mit float und width

Antwort

Verwandte Themen