Я хочу создать блок текста, например, следующее изображение:
(https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing)
Вопрос, возможно ли это?
Я хочу создать блок текста, например, следующее изображение:
(https://docs.google.com/file/d/0B8gEuF9U3SaENzNsOTdxMmV3Ykk/edit?usp=sharing)
Вопрос, возможно ли это?
вам нужно float
контейнер изображения следующим образом:
HTML
<div id="container">
<div id="floated">...some other random text</div>
...
some random text
...
</div>
CSS
#container{
width: 400px;
background: yellow;
}
#floated{
float: left;
width: 150px;
background: red;
}
FIDDLE
С CSS Shapes вы можете идти на один шаг дальше, чем просто плавать текст вокруг прямоугольного изображения.
Фактически вы можете обернуть текст таким образом, чтобы он принял форму края изображения или полигона, который вы его обертываете.
.oval {
width: 400px;
height: 250px;
color: #111;
border-radius: 50%;
text-align: center;
font-size: 90px;
float: left;
shape-outside: ellipse();
padding: 10px;
background-color: MediumPurple;
background-clip: content-box;
}
span {
padding-top: 70px;
display: inline-block;
}
<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
Дополнение к ответу BeNdErR:
Элемент "other TEXT" должен иметь значение float:none
, например:
<div style="width:100%;">
<div style="float:left;width:30%; background:red;">...something something something random text</div>
<div style="float:none; background:yellow;"> 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 text text text text text text text text text text text text text text text text text text text </div>
</div>
Если размер размера или дизайн отзывчив, помимо обертывания текста, вы можете установить ширину min для абзаца strong > , чтобы избежать слишком узкого. Дайте невидимый псевдоэлемент CSS с необходимой минимальной шириной абзаца. Если для этого псевдоэлемента недостаточно места, он будет сдвинут вниз под изображение, взяв абзац с ним.
#container:before {
content: ' ';
display: table;
width: 10em; /* Min width required */
}
#floated{
float: left;
width: 150px;
background: red;
}
Поместите каждый из них в промежуток и используйте float, чтобы указать направление
<div>
<img src="imgName.jpg" style="float:left;">
<p> your text here...</p>
</div>