Блог

На этой странице я пытаюсь расположить изображения цитаты вокруг цитаты блока, но они не помещаются правильно.

Это CSS:

     blockquote {
    padding-left:10px;
    color:#444;
    font-style: normal;
    width: 500px;
    background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
  padding: 0 100px;
  background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
  

В идеале я хочу сохранить изображения одинакового размера. Я просто хочу, чтобы текст перестал перекрывать изображения. Я попытался указать ширину .blockquote как 500px, но, похоже, это не имело никакого значения.

Приветствуются любые идеи. Спасибо — Tara

Две вещи:

1. Чтобы увидеть изображения за текстом, вам не следует указывать цвет фона для внутреннего абзаца; сделайте это transparent вместо этого.
2. Указанное заполнение не применяется из-за другого свойства ( .entry p ), которое более специфично. Вы могли бы задать для этого заполнения кавычки в блоке значение !important , но это обычно не рекомендуется, другой вариант — сделать это более конкретным, чем другое ( .entry p ), добавив .entry класс. Имейте в виду, что таким образом будут выбраны только блочные цитаты с родительским .entry классом. (больше информации о специфике)

css:

 blockquote {
  padding-left: 10px;
  color: #444;
  font-style: normal;
  width: 500px;
  background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}

.entry blockquote p {
  padding: 0 100px;
  background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
  

Попробуйте добавить это свойство:

 .entry p {
    margin: 5px 5px 5px 15px;
    padding: 0px 40px 0px 0px;
    line-height: 20px;
    font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
    font-size: 13px;
}
  

Мне удалось получить следующее:

Надеюсь, это помогло (:

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

 blockquote {
  padding: 0;
  margin: 0;
  border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
  color: #ccc;
  font-size: 4em;
  line-height: 0;
  height: 0;
  vertical-align: -0.5em;
  display: inline-block;
}
blockquote:after {
  content: "”";
  margin-left: 0.05em;
}
blockquote:before {
  content: "“";
  margin-right: 0.05em;
  margin-bottom: -0.5em;
}
  

Пример здесь в реальном времени
(Протестировано только в Firefox и Chrome)