Поля справа разбиты по ширине 100% - PullRequest
Новая
       36

Поля справа разбиты по ширине 100%

25 голосов
/ 26 марта 2012

У меня есть DIV, содержащий изображение и второй DIV.Для родительского DIV установлено значение position: absolute;, для дочернего DIV установлено значение position: relative.Идея состоит в том, чтобы я отображал подпись к моей фотографии сверху

У дочернего элемента DIV должна быть 100% ширина родительского элемента, минус 10px слева, справа и снизу, а такжечерный фон. 

.article-container {
  position: relative;
}

.photo-caption {
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
<div class="span15 article-container">
  <img src="images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

Левое поле выходит за пределы .photo-caption за пределами .article-container.Правое поле, похоже, не имеет никакого эффекта.

Я также пытался исправить это с помощью box-sizing.Кажется, ширина .photo-caption уменьшена до ширины родительского элемента, но вылет все еще сохраняется.

Ответы [ 8 ]

23 голосов
/ 26 марта 2012

Лучше, если вы удалите width:100%.напишите так: 

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }
17 голосов
/ 26 марта 2012

Абсолютно позиционированный элемент позиционируется с top, left, right и bottom, а не с margin.

6 голосов
/ 19 декабря 2013

Проблема в том, что width=100% даст photo-caption точную ширину article-container; добавление полей (или отступов) не повлияет на вычисление ширины. Вы можете сделать это самостоятельно, используя css calc(), чтобы стиль стал: 

.photo-caption  {
    width: calc(100% - 20px); // 20 = right margin + left margin
    background-color: black;
    position: absolute;
    bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

Обратите внимание, что вы можете проверить поддержку браузера calc () здесь

5 голосов
/ 29 марта 2017

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

Например: 

style="width:98%; margin-left: 1%;"
2 голосов
/ 26 марта 2012

Используйте либо padding вместе с box-sizing, либо вложенный блок с полями внутри вашего абсолютно позиционированного блока без полей.

1 голос
/ 24 ноября 2015

Для:

Простой ответ: не пытайтесь использовать margin-right.Используйте 'margin-left: xxxpx;'- сделайте ххх достаточно большим, чтобы задвинуть ваш блок div (Div Style = box) вправо настолько, насколько это необходимо.Не нужно для скрипки, можете поставить его именно там, где вы хотите.

1 голос
/ 26 марта 2012

Вам не нужна ширина: 100%, если вы отображаете блок. Это может решить все эти маленькие проблемы. 

.photo-caption  {
        display:block;
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding:10px
        }
0 голосов
/ 19 июля 2017

Поля - это расстояние от каждой стороны до соседнего элемента ИЛИ границы документа.

Margin right не означает, что он сместит элемент влево. Это означает, что он сгенерирует пространство справа. Если появится следующий элемент, он появится после указанного margin-right. В вашем случае ширина равна 100%. .Недостаточно для правого поля.

Точка замешательства: 1) визуальный эффект отличается, когда ширина равна auto. То же поле генерируется справа. Но из-за отсутствия свойства width. Ширина может быть изменена.

2) Тот же эффект, когда элемент перемещается вправо.

Эти 2 вышеупомянутых пункта будут иметь различное представление о крае справа.

...