2012-04-10 17 views
0

私はブログ:http://poweryogatrainings.blogspot.com/searchに取り組んでいます。リンクを確認すると、現在ブログの投稿がサムネイルのすぐ下にあることがわかります。今私はブログの投稿をサムネイルの横に並べるようにしようとしていますが、どうすればよいか分かりません。誰かが改行を引き起こしていることを知っていますか、それを避けるために何ができますか?改行の原因は何ですか?

また、実際にコードを変更せずにウェブサイトのコードを編集してプレビューを見ることができるウェブサイトがあると思います。それについてのアイデア?

+0

を楽しみにしていますH [1を使用していません-6]ヘッダータグを作成します。これらは常に新しい行を追加します。 H3タグの内側に画像を置くか、H3タグの代わりにdivを使います。 – sakhunzai

答えて

2

単純に以下のように、画像に左フロートを追加し、それを右と下にいくつかのスペースを与える:

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

また、2番目の質問のために... Firefoxを使用している場合は、コンテキスト内編集用のFirebug拡張機能を入手してください(Google:Firebug)。 Chromeを使用している場合は、ページの任意の場所で[要素の検査]を右クリックし、表示されるボックスで変更します。 – Liam

+0

私はfirefoxを使用しませんが、私はChromeでInspect Element機能を使用します。しかし、私はその目的のためにウェブサイトがあったほうがはるかに簡単だったと思うが、今は見つけられない。 –

+0

あなたが意味するかもしれない:[JSFiddle](http://jsfiddle.net)? – Liam

0

使用floatが同じ行にあなたの内容を配置します。 imgタグの場合はfloat:left;のように、コンテンツを水平に表示することができます。

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>に置かれたときに...

とにかく、幸運、私は一般的なヨガのサイトを愛し、完成品

関連する問題