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

How do I conditionally align elements based on screen size?

我的网站上有一个相当简单的 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/。我该如何解决这个问题?

所以这是一种方法:

  1. min-width: 50% 添加到 leftNavSectionrightNavSection

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

  1. 删除 body 的默认边距,用于调整 navbar:

    的 100% 宽度
    body {
      margin: 0;
    }
    

    现在换行将恰好发生在 600 像素以下!

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

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