代码之家 › 专栏 › 技术社区 › Nate CSS Guy

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

css html asp.net

Nate CSS Guy · 技术社区 · 15 年前

它在书名里。

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

我遇到的问题是在它旁边有一个分区,它可以根据剩余的宽度进行缩放。

这里有一个简单的方法吗?

2 回复 | 直到 15 年前

Nick Craver 15 年前

在右边的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>

Aaron 15 年前

您可以这样定义CSS类:

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

这将使右DIV的左边距保持在左DIV旁边,右边缘保持在窗口的右边缘。

推荐文章

Community wiki · 为什么使用DirectoryEntry对LDAP进行身份验证会间歇性地抛出COMException(0x8007203A):“服务器不可操作”?

1 年前

PixelScribe · 实体框架EDMX未更新ASP.NET web应用程序中的连接字符串

1 年前

Hua Deng · page_load中的调用方法导致adapter.fill()上出现StackOverflowException,但在其他地方调用时没有问题

1 年前

WingiM · REST API-如何实现具有相同名称但可接受参数类型不同的多个方法

1 年前

Community wiki · 基于两个参数在文本框中使用上下文键自动完成?

1 年前

NAM3L3SSRJ · 如何在C语言中创建一个方法或函数,在超市销售时减少数据库中的库存

2 年前

Javad A salehi · C#如何解析“MyValue”的动态值

2 年前

AlÄ±yev Rufet · 无法构造某些服务(验证服务描述符的服务类型时出错:Restaurant.Data.IAppRepository

2 年前

Geoff · 从Microsoft Identify Platform获取访问令牌

3 年前

Haim Ohayon · 这些链接之间有什么区别?

3 年前