换行时，浏览器宽度太短，无法将所有内容

本文介绍了换行时，浏览器宽度太短，无法将所有内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在设计一个简单的顶部菜单，左侧带有徽标，右侧有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） ; 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; } <脚本的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 leftHow to do it with my code mentioned before?Note: I would like the "wrap effect" to appear exactly whenwidth(#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');;} }); 这篇关于换行时，浏览器宽度太短，无法将所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！