旁边有一个静态的宽度DIV动态宽度DIV [英] Dynamic width DIV next to a static width DIV

查看:142
本文介绍了旁边有一个静态的宽度DIV动态宽度DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

它在所有的称号。

我试图让在页面左侧的div来固定宽度170像素;这工作正常。

I'm trying to get a div on the left of the page to a static width 170px; this works fine.

什么我遇到了越来越旁边一个div,即进行缩放以适应剩余宽度的问题。

What I'm having issues with is getting a div next to it, that scales to fit the remaining width.

有一个简单的方法,我可以用在这里?

Is there a simple approach I can use here?

推荐答案

在右侧的div,只需设置一个边距:

On the right-hand div, just set a margin:

style="margin-left: 170px;"

下面是一个例子页面,在这里工作:

Here's an example page, works here:

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

这篇关于旁边有一个静态的宽度DIV动态宽度DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆