Top Menü CSS Design

Question

Ich versuche, eine obere Menüleiste zu haben, aber ich scheitere float: left. Wie man das richtige Verhalten (hier im Widget selbst erwähnt) für eine obere Menüleiste?

 * { margin:0; padding: 0; } 
 
     #menu { background-color: yellow; } 
 
     #left {background-color: green; width: 200px; } 
 
     #mid { background-color: red; width: 40%; float: left; } 
 
     #right {background-color: blue; float: left; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
    </div> 
 
    <div> 
 
    content of the site 
 
    </div>

Answer 1

Ich denke, das ist, was Sie zu tun versuchen. Ich habe CSS flexbox verwendet, was es ziemlich einfach macht.

 * { margin:0; padding: 0; } 
 
     #menu { background-color: yellow; display: flex; } 
 
     #left {background-color: green; flex: 0 0 200px; } 
 
     #mid { background-color: red; flex: 0 0 40%; } 
 
     #right {background-color: blue; flex: 1; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
    </div> 
 
    <div> 
 
    content of the site 
 
    </div>

Wenn Sie Legacy-Unterstützung benötigen, dann brauchen Sie nur richtig die Schwimmer anwenden:

 * { margin:0; padding: 0; } 
 
     #menu { background-color: yellow; } 
 
     #left {background-color: green; float: left; width: 200px; } 
 
     #mid { background-color: red; float: left; width: 40%; } 
 
     #right {background-color: blue; }

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
    </div> 
 
    <div> 
 
    content of the site 
 
    </div>

Answer 2

Flexbox das tun kann.

Es ist wichtig, die richtigen Flex-Eigenschaften zu verwenden, damit sich die Divis mit begrenzter Breite nicht ausdehnen.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#menu { 
 
    background-color: yellow; 
 
    display: flex; 
 
} 
 
#left { 
 
    background-color: green; 
 
    flex: 0 0 200px; 
 
} 
 
#mid { 
 
    background-color: red; 
 
    flex: 0 0 40%; 
 
} 
 
#right { 
 
    background-color: blue; 
 
    flex: 1; 
 
}

<div id="menu"> 
 
    <div id="left">left green: 200px</div> 
 
    <div id="mid">mid red: 40% of browser width</div> 
 
    <div id="right">right blue: rest</div> 
 
</div> 
 
<div> 
 
    content of the site 
 
</div>