换行时，浏览器宽度太短，无法将所有内容 [英] 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像素 的

解决方案

<预类=片段码 - JS郎JS prettyprint-覆盖> $（文件）。就绪（函数（）{$（窗口）.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屋！