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

floatコンテンツを同じ行に配置するために使用します。imgタグのようfloat:left;に、コンテンツを水平に表示できます。

于 2012-04-10T09:28:20.457 に答える
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の3行目を削除するだけで、画像をラップする段落が流れるようになります。
  • コードをもう少し簡潔にするためにできることはたくさんあります。たとえば、記事のh3タグは、実際には記事のヘッダータグなどに含める必要があります。また<title>、<meta>タグを本文に配置するのが最適な場合は、タグを本文に含める必要が<head>あります。資料..

とにかく、幸運を祈ります。私は一般的にヨガサイトが大好きです。完成した記事を見るのを楽しみにしています。

于 2012-04-10T09:41:12.970 に答える