Динамическая ширина DIV рядом со статической шириной DIV - PullRequest
Новая
       7

Динамическая ширина DIV рядом со статической шириной DIV

2 голосов
/ 21 января 2010

Всего в названии.

Я пытаюсь получить div в левой части страницы до статической ширины 170px; это отлично работает.

У меня возникли проблемы с размещением рядом с ним элемента div, который масштабируется до остальной ширины.

Есть ли простой подход, который я могу использовать здесь?

Ответы [ 2 ]

4 голосов
/ 21 января 2010

В правом блоке 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>
3 голосов
/ 21 января 2010

Вы можете определить свои классы CSS следующим образом: 

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

Это сохранит левое поле правого элемента рядом с левым элементом, а правое поле - на правом краю окна.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...