如何根据屏幕尺寸有条件地对齐元素?
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/。我该如何解决这个问题?
所以这是一种方法:
- 将
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>
希望你能从上面的例子中得到进一步发展。让我知道您对此的反馈。谢谢!
我的网站上有一个相当简单的 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/。我该如何解决这个问题?
所以这是一种方法:
- 将
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.
删除
的 100% 宽度body
的默认边距,用于调整navbar
: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>
希望你能从上面的例子中得到进一步发展。让我知道您对此的反馈。谢谢!