Вопрос:

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

html css margin padding

435 просмотра

4 ответа

6 Репутация автора

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

Вот 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/

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

Автор: user435443643 Источник Размещён: 22.08.2016 08:44

Ответы (4)


0 плюса

18432 Репутация автора

Решение

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

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

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

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

Автор: Tyler Roper Размещён: 22.08.2016 08:49

0 плюса

2283 Репутация автора

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

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

Автор: pol Размещён: 22.08.2016 08:52

-1 плюса

3101 Репутация автора

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

.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 ...
В таком случае, укажите это в своем вопросе.

Автор: robjez Размещён: 22.08.2016 08:57

0 плюса

143 Репутация автора

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

Автор: lisarko8077 Размещён: 22.08.2016 09:09
Вопросы из категории :
32x32