Question

我有以下css。

#lll
{
  float:left;
  max-width:1000px;
  border:1px solid;
}

#rrr
{
  float:left;
  width:300px;
  border:1px solid;
}

ul
{
  list-style:none;
}

li
{
  float:left;
  width:300px;
}

我的HTML如下

<div id="lll">
  Hello

  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

<div id="rrr">
  right!
</div>

JSFiddle在这里http://jsfiddle.net/SN674/1/

现在我想做的是，当我调整窗口大小时，我希望div #ll可以调整大小，但div #rrr保持在右侧。

现在，如果我调整窗口大小，div #rrr会低于div #ll。

我怎样才能做到这一点？

Answer 1

以下是我在CSS中的表现：

http://jsfiddle.net/SN674/12/

<style type="text/css">
#lll
{
        position: relative;
        margin-right: 305px;
        max-width:600px;
        min-width: 40px;
        border:1px solid;
 }

ul
{
    list-style:none;        
}
li
{
    width:300px;
}

#rrr
{
    position:absolute;
    right: -302px;
    top: -1px;
    width:300px;
    border:1px solid;
}    
</style>
<div id="lll">
    Hello

    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <div id="rrr">
        Whatever
    </div>
</div>

这是JQuery中的一种方式（我将如何做）：

简短回答： http://jsfiddle.net/SN674/4/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>        
<script type="text/javascript">
           $(function(){

               $("div#lll").width($(document).width() - 350);
               $(window).resize(function(){
                   $("div#lll").width($(document).width() - 350);
               });
           });
       </script>
<div id="lll">
   Hello    
   <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
   </ul>
</div>
<div id="rrr">
   Whatever
</div>

详细答案：步骤1。下载jQuery

第2步。读这个： http://api.jquery.com/width/ http://api.jquery.com/resize/

第3步。检查我做的这个例子：

<html>

<head>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        div {
            float: left;
            width: 300px;
        }
        #solid {
            background-color: yellow;
        }
        #liquid{
            background-color: navy;
        }

    </style>
    <title>
        test
    </title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){

            $("div#liquid").width($(document).width() - 301);
            $(window).resize(function(){
                $("div#liquid").width($(document).width() - 301);
            });
        });
    </script>
</head>

<body>
    <div id="liquid">
        &nbsp;
    </div>
    <div id="solid">
        &nbsp;
    </div>
</body>
</html>

我希望这可以解决你的问题

Answer 2

我通过使用百分比使其具有弹性，尽管这可能不是您想要的。检查it。

Answer 3

你只需要在CSS中改变一下：

body { margin:0px;}
div {margin:0px;}

    #lll{
      float:left;
      margin-right:300px;
      border:1px solid;
    }

    #rrr{
      position:absolute; right:0px; top:0px;
      width:300px;
      border:1px solid;
    }

    ul{  list-style:none;}
    li{  float:left;  width:300px; }

虽然这不适用于IE6＆amp; IE7。与IE6兼容IE7我认为我们需要一些脚本。

CSS：只有一个div响应屏幕大小

3 个答案: