Форум

Мария86 · #1 (**permalink**) 16.11.2012, 14:12

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

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

dmitry111 · #2 (**permalink**) 16.11.2012, 15:21

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

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

ksa · #3 (**permalink**) 16.11.2012, 15:28

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

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

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

Мария86 · #4 (**permalink**) 16.11.2012, 15:32

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

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

Хотя нет, правильно поняли, очень правильно.

Смысл такой. Сейчас попробую под свой документ переделать.

Мария86 · #5 (**permalink**) 16.11.2012, 15:40

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

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

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

dmitry111 · #6 (**permalink**) 16.11.2012, 15:46

Мария86,

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

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

Мария86 · #7 (**permalink**) 16.11.2012, 20:53

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

Код:

<!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'.
Все, у меня сейчас мозг взорвется.

Мария86 · #8 (**permalink**) 16.11.2012, 22:49

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

У меня работает!!! Работает!!!

Спасибо всем, кто принимал участие!

danik.js · #9 (**permalink**) 17.11.2012, 02:55

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

Учитесь

Форум

Справочник

Discord чат

Курсы javascript