0

我正在写博客： http: //poweryogatrainings.blogspot.com/search。如果您检查链接，您可以看到当前博客文章就在缩略图下方。现在我正在尝试使博客文章在缩略图旁边（右侧）对齐，但我不确定如何。有谁知道是什么导致了换行符，我能做些什么来避免它？

另外我认为有一个网站，您可以在其中编辑网站代码并观看预览，而无需实际更改代码。有什么想法吗？

4

3 回答 3

2

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

img.postthumb {
    float: left;
    margin: 0 10px 10px 0;
}
于 2012-04-10T09:27:41.157 回答
0

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

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>你的文档..

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

于 2012-04-10T09:41:12.970 回答
0

用于float将您的内容放在同一行。喜欢float:left;img 标签将允许内容水平显示。

于 2012-04-10T09:28:20.457 回答