Почему оправданный элемент <p>игнорирует правое поле?

Question

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

У родительского div есть выравнивание текста: justify; свойство.

Я даю p (универсальное) поле в 20px, но по какой-то странной причине поле игнорируется в правой части абзаца. Я попробовал это на ul, и то же самое происходит.

Поле не игнорируется, если я не оправдываю текст внутри родительского элемента div. (Но я хочу, чтобы это было оправдано).

У плавающего элемента div есть поле: 0; так что я думаю, что это не проблема коллапса на полях.

Плавающий элемент div - это элемент с фиксированным размером (в пикселях), и он пуст, за исключением фонового изображения.

Я также пытался указать поле по правому краю: 20px; и это не сработало ...

Я знаю, что мог бы решить это, просто добавив левое поле к плавающему div. Но я хотел бы знать, что происходит.

Вот код, который я использую (я редактировал только имена классов).

CSS:

.parentDiv {
    position: absolute;
    width: 660px;
    height: 350px;
    z-index: -1;
    background-color:#4F4F4F;
    color:#FFFFFF;
    text-align:justify;
    overflow:hidden;
}

.foatedDiv {
    float:right;
    height:100%;
    margin:0;

}

.parentDiv p {
        margin:20px;
}

HTML:

<div class="parentDiv">
 <div class="floatedDiv" style="width:234px;background-image:url(images/jp01.jpg)"></div>

  <strong><a href="someAnchor">Anchor</a></strong>

  <p>Sope paragraph that I cannot understand why ignores its right margin and is driving me crazy.</p>

  <strong>Some Topic</strong>

  <ul>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
  </ul>
</div>

И вот что я получаю:

Answer 1

Потому что это изображение справа всплывает вправо. Это применяет вашу маржу, вы просто не можете сказать. Этот абзац фактически расширяется до самого правого угла под этим изображением, а поле с контентом - нет. Ваше поле справа должно быть шириной этого изображения плюс 20px, чтобы сделать отступ на 20px от изображения.

Как на самом деле выглядят ваши поля:

В то время как плавающий элемент толкает ваш контент влево, фактический физический блок все еще расширяется за этим. Чтобы вытолкнуть контент больше, вы должны учитывать все пространство, занимаемое изображением. Один из способов сделать это - добавить ширину к полям справа, например так:

.parentDiv p {
    margin: 20px 254px 20px 20px; /* 234 + 20 = 254 */
}

См. Решение на jsFiddle .

Answer 2

Поле применяется, но поскольку изображение шире, оно считается "достаточно хорошим".

Чтобы исправить эту проблему, добавьте padding: 0.01px;.Интуитивно понятно, что это не имеет значения, поскольку вы не можете видеть сотую часть пикселя, но отступ должен принудительно применить поле.

Answer 3

Не уверены, что заметили орфографическую ошибку?

**.foatedDiv** {
  float:right;
  height:100%;
  margin:0;
}

Должно быть floatedDiv

Я считаю, что код делает то, что вам нужно.Однако к встроенному стилю, где вы ссылаетесь на изображение, добавьте поле margin-left: 20px, и оно должно это исправить.

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