Html 允许文本环绕图像

不知道怎么解释，所以。我试图让文本放在图像旁边，而不是完全在下一行，或者只有一行文本与图像对齐，其余的行在下面。我该怎么做

代码如下：

<div class="main width">
    <div class="cont2">
        <div class="c5">
            <div class="head">Column Title</div>
            <div class="feat">
                <img src="http://scitechdaily.com/images/Hubble-Image-of-Elliptical-Galaxy-PGC-6240-150x150.jpg">
                <div class="featText">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>
            <div class="feat">
                stuff
            </div>
            <div class="feat">
                stuff
            </div>
            <div class="feat">
                stuff
            </div>
        </div>
    </div>
</div>

---

这可以在不浮动图像的情况下完成吗？

浮动

img

：

img{
    float: left;
}

---

JS Fiddle:

您需要将图片设置为align=“left”，如下所示：

使用浮动

.feat img {float:left;}

---

如果您将此添加到css中，您将获得图像旁边的第一行文本，以及图像下面的其余文本，尽管它不是很漂亮

.featText{
display: inline;
    vertical-align: top;
}

---

但也许这是前进的一步？

如果你真的想知道没有浮点数的解，那就来吧。但是使用

calc

是一个非常有技巧的解决方案。您必须知道

img

的宽度。我们必须在两个元素之间包含字符空间，因为内联块元素并不理想地彼此相邻

.feat img{width: 50px; display: inline-block}
.featText{width: calc(100% - 54px); display: inline-block}

---

抱歉，我忘了提及我正在尝试避免浮动。抱歉，我忘了提及我正在尝试避免浮动。我认为align属性已被弃用，因此即使它确实有效，我也不应该使用它。是的。。。图片的大小总是一样的吗？在这种情况下，您可以将文本的位置设置为相对，并使用top:-150px和left:150px将其放在图片旁边

.featText{width:50%；position:relative；left:150px；top:-150px}

浮动会更优雅。你为什么要避免浮动呢？我只是不喜欢。花车有一个习惯，几周后，随着更多的东西被编码进来，它们会回来咬我的屁股。在这种情况下，避免它们会更咬你。为什么我不能只用花车呢？如果我可以使用它们来创建页面布局，那么我应该可以使用它们来布局此列，否？发布了答案，但我不建议这样做。。。

.feat img{width: 50px; display: inline-block}
.featText{width: calc(100% - 54px); display: inline-block}