Question

我的网站上有一个相当简单的标题：

<header>
      <nav class="navbar navbar-inverse" style="">
  <div class="navContainer">
    <div id="navbar">
        <div id="leftNavSection">
        <img alt="My Logo" width="300" src="/assets/main_logo-791a416e4f99d38a339debb8dcebd7361d4172919425ace42ba2ce90336218e2.png">        
        </div>
        <div id="rightNavSection">
        Logged in as Dave A
        <a href="/users/edit">Edit</a>
        <a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
    </div>
    </div>
  </div>
</nav>
    </header>

我将徽标对齐左侧，Logout链接指向右侧：

#leftNavSection {
  float: left;
}

#rightNavSection {
  float: right;
}

但我想要的是，如果屏幕尺寸较小（移动浏览器），则Log Out链接会显示在徽标下方左侧。

但是，当我将“float：right”更改为“float：left”时，这不会发生。这是我的小提琴 - https://jsfiddle.net/kje3q74k/。我该怎么做呢？

Answer 1

所以这是一种方法：

将min-width: 50%添加到leftNavSection和rightNavSection。

这允许rightNavSection换行到第二行内容宽度强制显示时显示较小的显示。

删除body的默认边距，用于调整navbar的100％宽度：
```
body {
  margin: 0;
}
```
现在包装将在600px以下发生！
将rightNavSection浮动到左侧并使用text-align: right
将其对齐到右侧
低于600px使用媒体查询使用text-align: left：
```
@media only screen and (max-width: 600px) {
  #rightNavSection {
    text-align: left;
  }
}
```

以下片段：

body {
  margin: 0;
}
header {
  overflow: hidden;
}
#navbar {
  width: 100%;
  font-family: Arial;
  vertical-align: top;
  display: inline-block;
}
#leftNavSection {
  float: left;
  min-width: 50%;
}
#rightNavSection {
  float: left;
  min-width: 50%;
  text-align: right;
}
@media only screen and (max-width: 600px) {
  #rightNavSection {
    text-align: left;
  }
}

<header>
  <nav class="navbar navbar-inverse" style="">
    <div class="navContainer">
      <div id="navbar">
        <div id="leftNavSection">
          <img alt="My Logo" width="300" src="http://placehold.it/300x300">
        </div>
        <div id="rightNavSection">
          Logged in as Dave A
          <a href="/users/edit">Edit</a>
          <a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
        </div>
      </div>
    </div>
  </nav>
</header>

希望你能从上面的例子中取得进展。请告诉我您对此的反馈。谢谢！

如何根据屏幕尺寸有条件地对齐元素？

1 个答案: