最好的方式來定位divs正確的css

我需要做一個網站頂部與一些navegations工具。最好的方式來定位divs正確的css

它工作，但我不舒適。我想也許這不是正確的方法來做這些浮動股權。

我需要一個圖像在左邊和兩個itens在全寬div的右邊。

所以我做：

<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; 
}

它是確定與浮動權和其他一切還是我應該改變些什麼呢？ jsfiddle

來源

2016-03-26 Rick Joe

你不能有相同的'id'兩個元素。改用'class'。除此之外，這對我來說很好。 –

你可以使用它，但只是改變這兩個ID是類，如果你想你可以做到這一點與flexbox，但它已經可以 – DanyCode

哦，謝謝你的朋友！ –

Flexbox ...不需要浮動或定位....所有項目都按正確的順序。

#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>

來源

2016-03-26 19:11:40

非常感謝！ –

on #item right：30px如果您不指定位置，則不執行任何操作。使用

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

來源

2016-03-26 19:02:25 luk492

最好的方式來定位divs正確的css

回答

相關問題