Javascript-форум - Задать зависимость отступа одного элемента от длины другого

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Задать зависимость отступа одного элемента от длины другого (https://javascript.ru/forum/events/33266-zadat-zavisimost-otstupa-odnogo-ehlementa-ot-dliny-drugogo.html)

Задать зависимость отступа одного элемента от длины другого

Добрый день!
Не могу никак решить простую задачу. Есть два блока. Первый обтекает второй. Надо задать, что если второй имеет ширину 0, то ширина первого равна 100%, в если второй имеет ширину>0 то у первого ширина = 100%-(ширина второго), отступ от края = ширина второго.

Можно это как-то сделать??

<!DOCTYPE HTML>
<html>
  <head> 
    <style>
      #a,#b {
        height: 100px;
      }
      #a {
        background: #f00;
        float: left;
        width: 50%;
      }
      #b {
        background: #0f0;
        margin-left: 50%;
      }
    </style>
  </head>
  <body>

    <div id="a"></div>
    <div id="b"></div>

    <input id="size" type="range" min="0" max="100" value="50">
        
    <script>
      document.getElementById("size").onmousedown = function () {
      
        this.onmousemove = function () {
        
          document.getElementById("a").style.width = this.value + "%";
          document.getElementById("b").style.marginLeft = this.value + "%";
          
        };
        
      };  
    </script>
  </body>
</html>

Двигай ползунок ;)

Цитата:

Сообщение от dmitry111

Главное чтобы ширина первого == отступу второго

Осталось только понять как у ТС формируется та ширина... :)

Немного не правильно поняли. Я не могу справиться и написать сама скрипт, который бы проверял ширину второго блока (а ширина соответственно = 0+ в зависимости от содержимого), и присваивал бы это значение отступу первого блока.

Т.е. чтобы значение отступа было динамическим, изменялось в зависимости от ширины второго блока.

Хотя нет, правильно поняли, очень правильно. :)
Смысл такой. Сейчас попробую под свой документ переделать.

Цитата:

Сообщение от ksa (Сообщение 216255)

Осталось только понять как у ТС формируется та ширина... :)

Это, значит, надо еще что-то дописать, что бы определяло ширину второго блока (она будет меняться в зависимости от содержимого)? Так, наверное?

Мария86,

ширина второго блока (как и любого блочного элемента) по умолчанию равна 100%.

В примере выше вы не манипулируете шириной элемента #b, вы меняете его отступ слева, тем самым изменяя его ширину

Все равно не получается.
Допустим есть такая структура документа

Код:

<!DOCTYPE HTML>

<html>

  <head> 

    <style>

      .main {

      height: 100px;

      width: 100%; 

      }   

      #a {

        background: #f00;

        float: left;        

      }

      #b {

        background: #0f0;

      }

      .c {

         height: 50px;

         width: 50px;

         padding: 10px;

       }

    </style>

  </head>

  <body>

 <div class="main">

    <div id="a">

       <div class='c'></div>

    </div>

    <div id="b">        

    </div>

 </div>

  </body>

</html>

но у дива 'a' не задана ширина. Просто в нем или есть (div.c), или нет содержания и от этого определяется его ширина. Как при таких показателях задать ширину и отступ? Т.е. если есть div.c!=0 по высоте и ширине, то эти высота и ширина присваиваются 'a'. И следовательно отступ слева у 'b' = равен ширине 'a'. И 'b' обтекает слева 'a'.
Все, у меня сейчас мозг взорвется.:blink:

<script> 
				window.onload = function() {
				var awidth=document.getElementById('a').offsetWidth;
				var bmargin;
				bmargin=awidth;
document.getElementById('b').style.marginRight=bmargin+"px";
}
</script>

У меня работает!!! Работает!!!:p
Спасибо всем, кто принимал участие!

Как же вы любите забивать гвозди микроскопом.

Учитесь :)