CSS - Расположение изображений рядом с текстом
Если вы используете mogenerator, то вместо
[parentObject add<Child>sObject:childObject];
просто используйте:
[[parent object <child>sSet] addObject:childObject];
4 ответа
Вы ищете это?
p img { float: right; width: 900px; }
Это соответствует всем img-тегам внутри p-тегов. Но я рекомендую всегда использовать классы или идентификаторы в соответствии с правилами CSS. Простое использование имени тега рано или поздно может привести к досадной ловушке.
Править
Ммм, может, я ошибся. Вы хотите применить float: right; width: 900px; p-элементам, а не img-elements ...
AFAIK нет способа выбрать родительский элемент для определенного элемента. Он всегда работает в направлении PARENT -> CHILD, а не CHILD -> PARENT.
No. With the img inside the p, you can float the image right but the text will not stay in a column. It will wrap underneath the image. Any right margin or padding you apply to the p will also apply to the img.
Since you have two pieces of related information, I would wrap those in a div and then position them within the div.
.info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}
<div class="info">
<img src="image.jpg" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
В ответ на ответ Эмили .
Нет. С img внутри p вы можете смещайте изображение вправо, но текст не останусь в колонне. Так и будет оберните под изображением. Любое право поля или отступы, которые вы применяете к p также будет применяться к img.
Хотя она права, но в этом есть обходной путь. Хотя это не идеально:
p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }
img {position: absolute; top: 0; right: 0; }
Это должно поместить изображение в верхний правый угол p , в то время как текст помещается в столбец между левой границей элемента p и правый отступ 950 пикселей. Не идеально и немного беспорядочно, но позволяет получить эффект столбцов без добавления дополнительных тегов.
... если вы не хотите добавить clearfix br ( br.clearfix: display: block; clear: both ) в конце абзаца (чтобы заставить тег p выходить за изображение для коротких абзацев).
да, только что проверил это, убедитесь, что вы используете строгий тип документа
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>
<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>