divsを配置する最善の方法CSSを

Question

私はいくつかのnavegationsツールでウェブサイトのトップを行う必要があります。

これは機能していますが、私はそれほど気にしません。私はおそらく、右のこれらの浮動小数点演算を行う正しい方法ではないと思う。

全幅divの右側に左の画像と2つの画像が必要です。

だから私はやった：

<div id="menu"> 
    <div id="logo">LOGO</div> 
    <div id="item">Settings</div> 
    <div id="item">Options</div> 
</div> 

と

#menu{ 
    position:fixed; 
    width:100%; 
    height:50px; 
    background:#fff; 
} 

#logo{ 
    float:left; 
    right:30px; 
} 

#item{ 
    float:right; 
    right:30px; 
    margin-right:10px; 
} 

は、それがフロート右および他のすべてでOKか私が何かを変更する必要がありますか？ jsfiddle

Answer 1

フレックスボックス...浮動小数点または位置決めの必要はありません。また、項目は正しい順序です。

#menu { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #fff; 
 
    display: flex; 
 
} 
 
.logo { 
 
    margin-right: auto; 
 
} 
 
.item { 
 
    margin-right: 10px; 
 
}

<div id=menu> 
 
    <div class="logo">LOGO</div> 
 
    <div class="item">Settings</div> 
 
    <div class="item">Options</div> 
 
</div>

Answer 2

on＃右：30pxは、指定しないと何もしません。使用

#item{ 
    float:right; 
    position:relative; 
    right:30px; 
}