Блог

Главная - Вопросы по программированию - Как игнорировать заполнение родительского div

Как игнорировать заполнение родительского div

#html #css

Вопрос:

У меня есть изображение (inner-img) внутри div с дополнением (inner-div), и мне нужно, чтобы это изображение соответствовало внешнему div (main-div). Я пытался использовать отрицательную маржу, но это не работает. Есть свет?

 .main-div {
  width: 500px;
  background: yellow;
}

.inner-img {
  max-width: 100%;
}

.inner-div {
  padding: 20px;
} 
 <div class="main-div">
  <div class="inner-div">
    <img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
  </div>
</div>

Ответ №1:

Если вы не можете изменить свою разметку, вы можете использовать отрицательное поле .inner-img , чтобы изображение вырвалось из .inner-div 

 .main-div {
  width: 500px;
  background: yellow;
}

.inner-img {
  max-width: calc(100%   40px);
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
}

.inner-div {
  padding: 20px;
} 
 <div class="main-div">
  <div class="inner-div">
    <img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
  </div>
</div>

Ответ №2:

Я img вынул его из внутреннего div и поместил во внешний div. Это позволяет img расширить его до ограничений его родителя, который теперь .main-div :

Это может не сработать для вашего варианта использования, но я подумал, что об этом стоит упомянуть.

 .main-div {
  width: 500px;
  background: yellow;
}

.inner-img {
  width: 100%;
}

.inner-div {
  padding: 20px;
} 
 <div class="main-div">
  <img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
  <div class="inner-div">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
  </div>
</div>

Комментарии:

1. Эй, Роб, ты изменил только максимальную ширину на ширину? когда я запускаю свой код, он все еще застрял в inner-div. Как это работает с этим фрагментом кода, а не с моим кодом?

2. Посмотрите на Html. Я переместил img экран во внешний (.main-div) div.

3. Да, теперь я понимаю. Но в моем случае я не могу этого сделать. «Внутренний раздел»-это группа информации, поэтому изображение должно оставаться внутри нее. Есть какое-нибудь другое решение этого вопроса?

Метки: