Question

我正在撰写博客：http://poweryogatrainings.blogspot.com/search。如果您查看链接，则可以看到当前的博客文章位于缩略图下方。现在我试图让博客文章在缩略图旁边（右侧）对齐，但我不确定如何。有谁知道导致换行的原因以及我该怎么做才能避免它？

此外，我认为有一个网站，您可以编辑您的网站的代码并观看预览，而无需实际更改代码。关于它的任何想法？

Answer 1

只需将左浮动添加到图像中，并在右侧和底部给它一些空间，如下所示：

img.postthumb {
    float: left;
    margin: 0 10px 10px 0;
}

Answer 2

使用float将内容放在同一行。与img标签的float:left;类似，将允许内容水平显示。

Answer 3

如果你的缩略图宽度相同，那么你可以这样做：

article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }

几点：

WIDTH_OF_IMAGE应该替换为您的图片的实际宽度，并且可能是您希望在它与文章中的文字之间出现的任何额外空间
我推荐的代码会在列中排列，如果你想避免这种情况，那么只需删除css的第三行，你就会有流动的段落来包装图像
您可以做很多事情来使您的代码更加简洁，例如您的文章的h3标记应该在您文章的标题标记中。您还有<title>和<meta>标记在你的身体中，当这些最好放在你的文件的<head> ..

无论如何，祝你好运，我喜欢一般的瑜伽网站，期待看到完成的文章

什么导致换行？

3 个答案: