Встроенный блок css не может сделать элемент полной шириной

Question

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

Вот HTML:

<div class="main-class"> 
    <div class="background"> 
    <p>some info in the background</p> 
    </div> 
    <div class="content"> 
    <p>Some random content</p> 
    </div> 
</div> 

и CSS:

.main-class{ 
    padding: 20px; 
    width: 100%; 
    background-color: #fff; 
    display: inline-block; 
    box-sizing: border-box; 
} 
.background{ 
    margin: -20px; 
    background-color: #eee; 
    display: inline-block; // must use inline-block 
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
} 
.content{ 
    margin-top: 30px; 
} 

и вот демо: https://jsfiddle.net/uumkjLy8/1/

фоновый класс должен быть полная заливка с фоном, но, как видно из на правой стороне есть свободное пространство.

Answer 1

Элемент фона находится внутри элемента с дополнением, что означает, что он может расширять только ширину только в том случае, если вы выполняете какой-то «дрянной» метод, чтобы расширить его за пределами его родительского элемента (ширина> 100% и т. Д.). ,

Ваш отрицательный запас не будет фиксировать ширину, потому что это только движущийся div, не увеличивая его. Со 100% шириной и родителем, у которого есть отступы, никогда не будет полностью покрыть ширину своего родителя.

Смотрите эту скрипку пожалуйста: https://jsfiddle.net/uumkjLy8/6/

Я удалил отступы от .main-class, а также отрицательные поля на вашем .background.

Answer 2

box sizing Удалить из .background

https://jsfiddle.net/uumkjLy8/8/

Answer 3

Это может быть просто, как:

.main-class { 
 
    background-color: #fff; 
 
} 
 
.content, 
 
.background { 
 
    padding: 20px; 
 
} 
 
.background { 
 
    background-color: #eee; 
 
}

<div class="main-class"> 
 
    <div class="background"> 
 
    <p>some info in the background</p> 
 
    </div> 
 
    <div class="content"> 
 
    <p>Some random content</p> 
 
    </div> 
 
</div>

... если вы не вынуждены использовать некоторые из этих избыточных CSS ..
В таком случае укажите, что в вашем вопросе.

Answer 4

Думаю, вам не нужно заполнить: -20px в классе .background. Кроме того, добавьте прокладку: 20px в класс .content для того, чтобы быть выстроенным с помощью .background