1

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

Хорошо!

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>

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

3
  • 2
    Если только использовать js
    – Yuri
    18 дек 2016 в 19:45
  • @Yuri поддай идею?
    – Nick
    18 дек 2016 в 19:56
  • В общем случае никак, в конкретном - надо думать. В приведённом примере недостаточно данных. Вот тут не получилось.
    – Qwertiy
    19 дек 2016 в 9:13

3 ответа 3

3

Изменять нужно только в 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>

4
  • а если в первом блоке(.one) стоит width: 100%, все так и остается?
    – Nick
    18 дек 2016 в 21:33
  • Да. Только этот код работает, если в .three ширина указана процентами. Если пикселями, то оно некорректно будет выводить
    – Yuri
    18 дек 2016 в 21:37
  • я понял) То есть по сути получается адаптивность?
    – Nick
    18 дек 2016 в 22:02
  • @Nick, получается :)
    – Yuri
    19 дек 2016 в 13:41
0

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

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

0

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

* {
  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% от выбранного элемента.

2
  • А это какой язык?
    – Qwertiy
    19 дек 2016 в 9:11
  • Это JavaScript plugin. Подробнее можете почитать тут, прада на английском. 19 дек 2016 в 12:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.