CSS - игнорировать заполнение от родителя (без отрицательного поля) - PullRequest
Новая
       7

CSS - игнорировать заполнение от родителя (без отрицательного поля)

0 голосов
/ 10 марта 2020

Я пытаюсь выяснить, как игнорировать заполнение, установленное родительским элементом.

Я создал здесь пример кода для игры: 

body {
  background-color: #000;
}

.content {
  padding: 50px;
  margin: 0px;
  background-color: #FFF;
}

img {
  padding: unset;
}

.details {
  background-color: #ccc;
  width: 100%;
}
<div class="content">


  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus aliquam nisi, eget gravida dolor. Maecenas id pretium urna. Maecenas eu odio eu mauris tristique iaculis. Mauris posuere turpis arcu, et viverra erat laoreet sed. Nulla in faucibus
  lorem. Phasellus ultricies rhoncus urna, vitae sodales eros varius vitae. Fusce vitae diam elit. In imperdiet arcu in mauris tincidunt, in aliquam elit sollicitudin. Etiam malesuada, libero id dictum congue, urna ligula vestibulum turpis, pellentesque
  auctor dolor nulla semper enim. Sed non neque sit amet tortor blandit malesuada. Mauris dapibus congue volutpat. Mauris sit amet tortor vel tortor lacinia lobortis. Morbi scelerisque mauris ac condimentum aliquam. Pellentesque habitant morbi tristique
  senectus et netus et malesuada fames ac turpis egestas. Curabitur commodo urna at nisi malesuada malesuada. Vestibulum eu neque nec orci porta pharetra eu nec enim. Phasellus a cursus lacus, at tristique magna. Vivamus venenatis est non magna pretium
  ornare. Pellentesque molestie malesuada finibus. Nam pretium elementum est, scelerisque dignissim sapien bibendum non. Nunc id ex at elit consequat convallis a eget tellus. Fusce quis auctor arcu. Phasellus id mauris tincidunt, vulputate neque nec,
  aliquam erat. Maecenas feugiat porta porttitor. Donec ut ex tempor nisi feugiat rutrum. Praesent auctor, justo sit amet facilisis pretium, sem mi accumsan ante, tristique pretium arcu felis id risus. Vestibulum ac orci justo.

  <table class="details">
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
  Ut mollis justo non condimentum venenatis. Pellentesque et mi vel lectus consequat laoreet in eu risus. Cras elementum fermentum pretium. Nullam laoreet sed neque ut mattis. Pellentesque condimentum mi vel sapien mattis, ac porta libero gravida. Maecenas
  non erat at ligula ultrices bibendum. Quisque neque est, commodo eget orci nec, congue pretium lorem.

  <img class="test" src="https://images.laurentwillen.be/sites/21/2020/02/huawei-gt-active-top-scaled.jpg" width="100%"> Aenean ultrices posuere rutrum. Vivamus scelerisque leo a velit faucibus, sed congue massa condimentum. Nam bibendum leo in arcu aliquet
  laoreet. Duis vulputate quam vel euismod volutpat. Sed commodo, nibh at aliquet porttitor, leo ante varius massa, in ultrices enim turpis et metus. Morbi fermentum neque est, at consectetur purus elementum ut. Aliquam dictum pretium tristique. Suspendisse
  ullamcorper interdum libero sed tempor. Praesent vulputate sapien venenatis dui feugiat aliquet. Sed consectetur mi sit amet arcu iaculis dapibus. Vestibulum ac est eu urna laoreet fermentum et eget quam.
</div>

То, чего я пытаюсь добиться, - это заполнить все, кроме изображений и таблиц. Изображение и таблица должны занимать все доступное пространство, оно должно касаться левой и правой границ. Вот почему я не могу использовать отрицательное поле, так как это просто сместит изображение или таблицу влево.

Я также пробовал использовать отрицательное поле и увеличив ширину изображения с помощью cal c (100% + xxpx) но это не работает.

У вас есть идеи, как я мог это сделать?

Спасибо

Ответы [ 2 ]

2 голосов
/ 10 марта 2020

Отрицательное поле отлично работает, если правильно установить ширину: 

.content {
  padding: 50px;
  margin: 0px;
  background-color: #FFF;
  border: 1px solid;
}

table {
  margin: 0 -50px;
  width:calc(100% + 100px);
  outline: 1px solid red;
  background-color: #ccc;
}

img {
  margin: 0 -50px;
  display: block;
  width:auto;
  max-width:calc(100% + 100px);
  outline: 1px solid red;
}
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus aliquam nisi, eget gravida dolor. Maecenas id pretium urna. Maecenas eu odio eu mauris tristique iaculis. Mauris posuere turpis arcu, et viverra erat laoreet sed. Nulla in faucibus
  lorem. Phasellus ultricies rhoncus urna, vitae sodales eros varius vitae. Fusce vitae diam elit. In imperdiet arcu in mauris tincidunt, in aliquam elit sollicitudin. Etiam malesuada, libero id dictum congue, urna ligula vestibulum turpis, pellentesque
  auctor dolor nulla semper enim. Sed non neque sit amet tortor blandit malesuada. Mauris dapibus congue volutpat. Mauris sit amet tortor vel tortor lacinia lobortis. Morbi scelerisque mauris ac condimentum aliquam. Pellentesque habitant morbi tristique
  senectus et netus et malesuada fames ac turpis egestas. Curabitur commodo urna at nisi malesuada malesuada. Vestibulum eu neque nec orci porta pharetra eu nec enim. Phasellus a cursus lacus, at tristique magna. Vivamus venenatis est non magna pretium
  ornare. Pellentesque molestie malesuada finibus. Nam pretium elementum est, scelerisque dignissim sapien bibendum non. Nunc id ex at elit consequat convallis a eget tellus. Fusce quis auctor arcu. Phasellus id mauris tincidunt, vulputate neque nec,
  aliquam erat. Maecenas feugiat porta porttitor. Donec ut ex tempor nisi feugiat rutrum. Praesent auctor, justo sit amet facilisis pretium, sem mi accumsan ante, tristique pretium arcu felis id risus. Vestibulum ac orci justo.

  <table class="details">
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
  Ut mollis justo non condimentum venenatis. Pellentesque et mi vel lectus consequat laoreet in eu risus. Cras elementum fermentum pretium. Nullam laoreet sed neque ut mattis. Pellentesque condimentum mi vel sapien mattis, ac porta libero gravida. Maecenas
  non erat at ligula ultrices bibendum. Quisque neque est, commodo eget orci nec, congue pretium lorem.
  <img class="test" src="https://images.laurentwillen.be/sites/21/2020/02/huawei-gt-active-top-scaled.jpg" width="100%">
  Ut mollis justo non condimentum venenatis. Pellentesque et mi vel lectus consequat laoreet in eu risus. Cras elementum fermentum pretium. Nullam laoreet sed neque ut mattis. Pellentesque condimentum mi vel sapien mattis, ac porta libero gravida. Maecenas
  non erat at ligula ultrices bibendum. Quisque neque est, commodo eget orci nec, congue pretium lorem.

</div>
0 голосов
/ 10 марта 2020

Проблема в том, что ваше изображение встроено в ваш div, и без каких-либо хитрых css вы не получите то, что ищете 

<div class="content">
   ...
</div>
<img class="test" src="https://images.laurentwillen.be/sites/21/2020/02/huawei-gt-active-top-scaled.jpg" width="100%"> 
<div class="content">
   text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
...