Question

它的全部都在标题中。

我正在尝试将页面左侧的div设置为静态宽度170px;这很好。

我遇到的问题是在它旁边有一个div，它会缩放以适应剩余的宽度。

我可以在这里使用一种简单的方法吗？

Answer 1

在右侧div上，只需设置一个余量：

style="margin-left: 170px;"

这是一个示例页面，在这里工作：

<html>
  <head>
    <title>Jquery Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(function()  {
        var right = $("#right");
        $("#toggle").click(function() {
          $("#left").animate({"width": "toggle"}, {
            duration: 250,
            step: function() {
                right.css("margin-left", $(this).width());
            }
          }, function() { right.css("margin-left", $("#left").width()); });             
        });
      });
    </script>
    <style type="text/css">
      #left { width: 170px; float: left; border: solid 1px red; }
      #right { margin-left: 170px; border: solid 1px green; }
    </style>
  </head>
  <body>
    <div id="left">Test</div>
    <div id="right">Test Right</div>
    <input id="toggle" value="Open/Close" type="button" />    
  </body>
</html>

Answer 2

您可以像这样定义css类：

#left-div {
    margin-left: 0px;
    width: 170px;
    float: left;
}
#right-div {
    margin-left: 170px;
    margin-right: 0px;
}

这将使右div的左边距保持在左边div的旁边，而右边距保留在窗口的右边缘。

静态宽度DIV旁边的动态宽度DIV

2 个答案: