Question

我有一些文字，然后我有一些较大的文字，我希望能够将文字包裹在较大的文本周围。不确定我会使用什么属性。下面是我想要的例子，但是把图像放到一个文本块中：

enter image description here

继承我现在的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％肯定。

Answer 1

您需要使用float: left或float: right。

http://jsfiddle.net/74Z9d/

Answer 2

当我运行你的代码时，我得到了这个：

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>

啊，我看到你现在在问什么。我想其他人已经回答了你的问题：）

Answer 3

根据你的解释很难理解你想要什么，无论如何我只是“重构”你的代码，可能这就是你想要的。 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>

Answer 4

简短的回答：

我只是将所有内容放在一个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'>的{{1}}子元素之前，文本会变大并覆盖任何样式。

为了让它符合消息，我会尽可能地<div class='message'>。{/ p>

这是一个可以在这里演示和查看的jsfiddle：

http://jsfiddle.net/m4bHJ/

HTML / CSS - 围绕较大的文本换行文本

4 个答案: