Good day) When using a percentage record, the width of the element is calculated depending on the width of the parent element.

Good!

How to make that the width of a child element in percent is calculated not by the width of the parent, but by the width of the parent block of its parent!

for example

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

Or is it impossible?

  • 2
    If you only use js - Yuri
  • @Yuri give an idea? - Nick
  • In general, in any way, in particular - it is necessary to think. In the given example there is not enough data. Here it did not work. - Qwertiy ♦

3 answers 3

You only need to change the percentage in 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>

  • and if in the first block (.one) there is a width: 100%, does everything remain so? - Nick
  • Yes. Only this code works if the width in .three is indicated in .three . If pixels, then it will be incorrect to display - Yuri
  • I understood) That is, in fact, it turns out adaptability? - Nick
  • @Nick, it turns out :) - Yuri

Well, if I understood correctly, then like this -

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

    You can implement this way, in this case, you can pull out the data of any element on the page:

     * { 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>

    Adjustable by width: 20ew; That corresponds to 20% of the selected item.

    • What language is this? - Qwertiy ♦
    • This is a javascript plugin. You can read more here , prada in English. - Alexey Giryayev