トップメニューCSSデザイン

Question

トップメニューバーを作成しようとしていますが、float: leftを使用していません。 トップメニューバーの正しい動作（ウィジェット自体にここに記載されています）を持つにはどうすればいいですか？

 * { 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

私は、これはあなたが何をしようとしてあると思います。私はそれをかなり簡単にするCSS flexboxを使用しました。

 * { 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>

レガシーサポートが必要な場合は、単に適切に山車を適用する必要があります。

 * { 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

フレキシボックスはそれを行うことができます。

正しいflexプロパティを使用して、制限された幅のdivが展開されないようにすることが重要です。

* { 
 
    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>