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

Question

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

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

我将徽标左对齐，注销链接右对齐：

#leftNavSection {
  float: left;
}

#rightNavSection {
  float: right;
}

但是，如果屏幕尺寸较小（移动浏览器），我希望 Log Out 链接在徽标下方左对齐。

但是，当我将“float:right”更改为“float:left”时，这并没有发生。这是我的 Fiddle — https://jsfiddle.net/kje3q74k/。我该如何解决这个问题？

Answer 1

所以这是一种方法：

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

This allows the rightNavSection to wrap to the second line on smaller displays when the content widths forces it down.

删除 body 的默认边距，用于调整 navbar:
的 100% 宽度
```
body {
  margin: 0;
}
```
现在换行将恰好发生在 600 像素以下！
将 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>

希望你能从上面的例子中得到进一步发展。让我知道您对此的反馈。谢谢！

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

How do I conditionally align elements based on screen size?

html

css

header

css-float

nav