HTML/CSS - Обтекание текста вокруг большого текста

У меня есть текст, а затем у меня есть более крупный текст. Я хочу, чтобы можно было обернуть текст вокруг большего текста. Не уверен, какой атрибут я буду использовать. Херес eample того, что я хочу, но поместить изображение в блок текста:HTML/CSS - Обтекание текста вокруг большого текста

enter image description here

Heres мой текущий CSS:

.message h1{ 
font-family: 'Audiowide', cursive; 
font-size: 76px; 
position: absolute; 
left: 106px; 
top: 120px; 
color: white; 
float: left; 
} 
.text p{ 
opacity: .7; 
position: absolute; 
font-family: 'Abril Fatface', cursive; 
font-size: 36px; 
left: 108px; 
width: 1080px; 
height: 421px; 
top: 117px; 
color: white; 
}

и мой HTML код:

<div class="message"> 
<h1 align="left">Hello there is<br>Some text here</br></h1></div> 
<div class="text"> 
<p>and Some more text here</p> 
</div>

, так что давайте подытожим то, что я спрашиваю. У меня есть большой текст, и я хочу, чтобы меньший текст обернулся вокруг большего текста. Я огляделся и обнаружил, что вы можете обернуть картинки, но я не уверен на 100% в отношении другого текста.

источник

2014-01-31 apples

Можете ли вы показать нам пример того, какой эффект вы хотите? – Justin

обновил quesstion – apples

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

Вам необходимо использовать float: left или float: right.

http://jsfiddle.net/74Z9d/

источник

2014-01-31 01:42:00 dave

На самом деле плавать - это все, что вам нужно: http://jsfiddle.net/74Z9d/1/ –

Вы правы. – dave

К сожалению, это не сработало – apples

Когда я запускаю свой код, я получаю это:

enter image description here

И я верю, что вы хотите этого?

enter image description here

Тогда просто сделать это на ваш HTML:

<body> 
<div class="message"> 
<div class="text"> 
<p>Some more text here 
<h1 align="left">Hello there is<br>Some text here</br></h1></div> 
and Some more text here</p> 
</div> 
</body> 
</html>

Ах, я вижу, что вы спрашиваете прямо сейчас. Я думаю, что другие ответили на ваш вопрос за вас :)

источник

2014-01-31 01:43:49 user3089840

действительно сложно понять, что вы хотите, основываясь на вашем объяснении, так или иначе, я просто «реорганизую» код, возможно, это то, что вы хотите. jsfiddle

.message { 
    background: blue; 
    width: 100%; 
    padding: 10px; 
} 

img { 
float: right; 
padding: 10px; 
/*optional*/ 
max-width: 40%; 
} 


<div class="message"> 
    <h1>Hello there is Some text here</h1> 
    <img src="http://i.stack.imgur.com/kJbY7.jpg"> 
    <p>and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here </p> 
</div>

источник

2014-01-31 01:50:33 andresmijares25

Я хочу обернуть текст вокруг текста, а не изображение, поэтому я сказал в своем вопросе, что вместо изображения я использовал текст – apples

заменил img другим div ... установите как ширину: 50%, так и все, что вам нужно, и заставить их плавать слева – andresmijares25

Short anwswer:

Я просто положить все в одном DIV, и поставить <br /> теги везде, где находятся наши правила.

Длинный ответ:

Так первая вещь, я бы заменить <h1> элемент с <span class='larger'><span>

Допустим, у вас есть следующие:

<div class='message'> 
    <span class='larger'>Here is some text</span> followed by smaller text 
</div>

Если поставить стили на класс <div class='message'> имеет меньший текст (поскольку он является контейнером .. или родителем класса span), он имеет стили небольшого текста по умолчанию. Пока он не удалит дочерний элемент <span class='larger'><div class='message'>, текст станет больше и переопределит любой из стилей.

Чтобы оно соответствовало сообщениям, я бы посыпал <br /> везде, где это подходит.

Вот jsfiddle вы можете демо и посмотреть здесь:

http://jsfiddle.net/m4bHJ/

источник

2014-01-31 02:15:34 sksallaj

HTML/CSS - Обтекание текста вокруг большого текста

ответ

Смежные вопросы