换行时,浏览器宽度太短,无法将所有内容 [英] Wrap when the browser width is too short to have everything inline
问题描述
我正在设计一个简单的顶部菜单,左侧带有徽标,右侧有inline-links:
* {margin:0; padding:0; } #header {background-color:gray; } #right {background-color:blue; float:right; } #left {background-color:green; float:left; } li {display:inline-block; padding:0 30px; }
< div id =header> < div id =left> LOGOLOGOLOGOLOGOLOGO< / div> < div id =right> < ul> < li>链接1< / li> < li>链接2< / li> < li>链接3< / li> < li>链接4< / li> < / ul> < / div> < / div>
我想:
-
当浏览器宽度足以使所有内容都成为内联时,链接列表应在当浏览器宽度不足以满足所有要求时,右边(
float:right
) -
如何使用我之前提到的代码? / p>
注意:我希望wrap effect / em>
width(#left)+ width(#right)> width(browser)
< (浏览器)< code>之类的静态元素,code>
; 300像素 的
$(文件)。就绪(函数(){$(窗口).resize(函数(){VAR lwidth = parseInt函数($('#左),CSS('宽')); VAR rwidth = parseInt函数($('#权) .css('width')); var fwidth = lwidth + rwidth; var swidth = $(window).width()if(fwidth> swidth){$('#right')。css('float','left');} else {$('#right')。css('float','right');;} });
* {margin:0; padding:0; } #header {background-color:gray; } #right {background-color:blue; float:right; } #left {background-color:green; float:left; } li {display:inline-block; padding:0 30px; }
<预类=片段 - 代码HTML语言,HTML prettyprint-覆盖> <脚本的src =https://开头阿贾克斯.googleapis.com / ajax / libs / jquery / 1.2.3 / jquery.min.js>< / script>< div id =header> < div id =left> LOGOLOGOLOGOLOGOLOGO< / div> < div id =right> < ul> < li>链接1< / li> < li>链接2< / li> < li>链接3< / li> < li>链接4< / li> < / ul> < / div> < / div>
$ c> width(#left)+ width(#right)> width(browser)然后更改 div#right
float
从右
到左
。
$(window).resize(function(){
var lwidth = parseInt($('#left')。
var rwidth = parseInt($('#right')。css('width'));
var fwidth = lwidth + rwidth;
var swidth = $(window).width )
if(fwidth> swidth){
$('#right')。css('float','left');}
else {$('#right' .css('float','right');;}
});
I'm designing a simple top-menu with a logo on the left, and inline-links on the right:
* { margin:0; padding: 0; }
#header { background-color: grey; }
#right { background-color: blue; float:right; }
#left { background-color: green; float:left; }
li { display:inline-block; padding: 0 30px; }
<div id="header">
<div id="left">LOGOLOGOLOGOLOGOLOGOLOGO</div>
<div id="right">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
I would like that :
when the browser width is enough for everything to be inline, the links-list should be aligned on the right (
float: right
)when the browser width is not enough for everything to be inline, the links-list should be aligned on the left
How to do it with my code mentioned before?
Note: I would like the "wrap effect" to appear exactly when
width(#left)+width(#right)>width(browser)
and not with something static like width(browser)<300px
.
$(document).ready(function(){
$( window ).resize(function(){
var lwidth=parseInt($('#left').css('width'));
var rwidth=parseInt($('#right').css('width'));
var fwidth=lwidth+rwidth;
var swidth=$(window).width()
if (fwidth > swidth){
$('#right').css('float','left');}
else{$('#right').css('float','right');;}
});
});
* { margin:0; padding: 0; }
#header { background-color: grey; }
#right { background-color: blue; float:right; }
#left { background-color: green; float:left; }
li { display:inline-block; padding: 0 30px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="header">
<div id="left">LOGOLOGOLOGOLOGOLOGOLOGO</div>
<div id="right">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
check on load, if width(#left)+width(#right)>width(browser)
then change div#right
float
from right
to left
.
$( window ).resize(function(){
var lwidth=parseInt($('#left').css('width'));
var rwidth=parseInt($('#right').css('width'));
var fwidth=lwidth+rwidth;
var swidth=$(window).width()
if (fwidth > swidth){
$('#right').css('float','left');}
else{$('#right').css('float','right');;}
});
这篇关于换行时,浏览器宽度太短,无法将所有内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!