Наследование width

346
20 декабря 2016, 22:08

Доброго времени суток) При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента.

Хорошо!

Kак cделать, что бы ширина дочернего элемента в процентах вычислялась не по ширине родительского, а по ширине родительского блока его родителя!

Например

 <div class="main_slider">
   <div class="sliders">
        <div class="img slide">  //что бы width(%) наследовался не от sliders, a от main_slider
           <img src="Page_bridge.jpg" alt="">
          <div class="des">
             <p>Good Inc. image caption to go here</p>
          </div>
        </div>
  </div>
</div>

Или это невозможно?

Answer 1

Изменять нужно только в CSS проценты :)

$(function() { 
  var e = $('.three'), p0 = $('.two'), p1 = $('.one'); 
  var w = (e.outerWidth() / p0.outerWidth()) * p1.outerWidth(); 
  e.css({width: w}); 
});
.one {width:300px;height:50px;border:1px solid #000} 
.two {width:50%;height:50px;background-color:black} 
.three {width:40%;height:50px;background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="one"> 
  <div class="two"> 
    <div class="three"> 
    </div> 
  </div> 
</div>

Answer 2

Ну если я правильно понял, то вот так - 

.first { 
  width: 200px; 
  height: 200px; 
   
  background: pink; 
   
  position: relative; 
} 
 
.second { 
  width: 150px; 
  height: 150px; 
   
  background: orange; 
} 
 
.third { 
  width: 100%; 
  height: 50px; 
   
  background: tomato; 
   
  position: absolute; 
}
<div class="first"> 
  <div class="second"> 
    <div class="third"></div> 
  </div> 
</div>

Answer 3

Можно реализовать таким способом, при этом, можно вытаскивать данные любого элемента на странице:

* { 
  margin: 0; 
  padding: 0; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
.one { 
  width: 100%; 
  height: 100px; 
  background: #eee; 
} 
.two { 
  width: 50%; 
  height: 100px; 
  background: #ccc; 
} 
.three { 
  background: #000; 
  height: 100px; 
} 
@element ".one" { 
  .three { 
    width: 20ew; 
  } 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.4.0/EQCSS.min.js"></script> 
<div class="one"> 
  <div class="two"> 
    <div class="three"> 
    </div> 
  </div> 
</div>

Регулируется значением width: 20ew;, что соответсвует 20% от выбранного элемента.

READ ALSO
Чем отличается JavaScript от ES6 и EC2015?
javascript

Чем отличается JavaScript от ES6 и EC2015?

Собственно, вопрос: чем отличается JavaScript от ES6, EC2015 и TypeScript? Никто мне толком не может ответить по существуЗачем для Angular 2 мне нужен именно...

 542
Подключение скрипта к странице
javascript

Подключение скрипта к странице

В расширении для google chrome указал скрипт, который выполнится на нужном мне сайте

 338
Как происходит запись в середину файла?
javascript

Как происходит запись в середину файла?

Верно ли, что нельзя дописать что-то не в конец файла, не перезаписав файл? Как поступают, например, стандартные парсилки/редакторы XML (в любом...

 340
Mongoosejs Изменение объекта в массиве
javascript

Mongoosejs Изменение объекта в массиве

Схема

 333