0

HTML/CSSを2週間ほど使用しています。

サイトのテキストを子犬のサムネイルの下ではなく、すぐ隣に配置するのに問題があります。

テキストと画像の両方をフロートさせると、それらは並んでいますが、テキストが最初であり、画像ではありません。なぜこれでしょうか？テキストは、HTMLの画像の後に表示されます。

これがJSFiddleです。私はこれまでJSFを使用したことがないので、正しく使用したことを願っています。JSFの画像が機能しない理由がわかりません（外部リンクの画像（子犬））。

http://jsfiddle.net/nhv54/

4

4 に答える 4

2

画像やテキストを並べるときは、ブロック要素内に配置するのではなく、インライン要素またはインラインブロック要素を使用するのが好きです。これは、特にあなたのケースで機能するはずの例です。

HTML

<p>
    Vertically centered text
    <img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>​
于 2012-07-24T21:16:56.570 に答える
1

これをチェックしてください http://jsfiddle.net/nhv54/3/

CSSで注意すべきこと

.pull-left * {
         float: left;    
}

また、コンテンツを1行に配置するすべてのdivには、クラス「pull-left」が必要です。

<div class = "ProjectsModules pull-left" id = "example1">
  <img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy               .jpg"/>
  <div id = "ProjectsModulesText">
    <h1> Jim </h1>
    <p>
      stuff
    </p>
  </div>
</div>
于 2012-07-24T21:17:19.367 に答える
0

vertical-align: middle;また、テキストが含まれているタグ（おそらく。）に設定することもできますp。

于 2012-07-24T21:18:57.003 に答える
0

インラインブロックを使用できます

JSFIDDLEを更新しました

http://jsfiddle.net/nhv54/16/

于 2012-07-24T21:26:02.390 に答える