当浏览器宽度太短而无法内联所有内容时换行

Question

我正在设计一个简单的顶级菜单，左侧是徽标，右侧是内联链接：

* { 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>

我希望如此：

• 当浏览器宽度足以让所有内容嵌入时，链接列表应在右侧对齐（float: right）

• 当浏览器宽度不足以内嵌所有内容时，链接列表应在左侧对齐

如何使用之前提到的代码执行此操作？

注意：我希望“包装效果”在

时显示完全

width(#left)+width(#right)>width(browser)

和不与width(browser)<300px等静态内容。

Answer 1

$(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>

检查加载情况，如果width(#left)+width(#right)>width(browser)，则将div#right float从right更改为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');;}
    });

Answer 2

媒体查询don't support individual elements，因此您将不得不使用Javascript来执行此操作。

我建议使用css-element-queries。它允许您编写基于元素的媒体查询，因此您不必编写任何javascript。

如果您想自己动手，在加载文档时，请使用

之类的内容

  if (document.getElementById('left').offsetWidth + document.getElementById('right').offsetWidth > window.innerWidth) {
      //apply styles using javascript
  }

要在窗口调整大小时执行此操作：

  window.onresize = function(event) {
      if (document.getElementById('left').offsetWidth + document.getElementById('right').offsetWidth > window.innerWidth) {
        //apply styles using javascript
      }
  };