Question

我需要使用一些navegations工具做一个网站顶部。

它正在运作，但我并不舒服。我想也许这不是在右边做这些浮动div的正确方法。

我需要左边的图像和全宽度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

Answer 1

右边的#ite：如果你没有指定位置，30px什么也不做。使用

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

Answer 2

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>

正确定位div的最佳方法css

2 个答案: