19

たとえば、テキストの横に画像を表示したい場合、通常は次のようにします。

<table>
    <tr>
        <td><img ...></td>
        <td>text</td>
    </tr>
</table>

より良い代替案はありますか？

4

9 に答える 9

20

クリアされたコンテナ内にそれらを浮かせる必要があります。

例：

https://jsfiddle.net/W74Z8/504/

ここに画像の説明を入力してください

クリーンな実装は「clearfixハック」です。これはNicolasGallagherのバージョンです。

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}
​
于 2012-07-11T18:29:35.270 に答える
9

はい、通常、divとCSSは、HTMLを配置するためのより優れた簡単な方法です。これを行うには多くの異なる方法があり、それはすべてコンテキストによって異なります。

たとえば、テキストの右側に画像を配置する場合は、次のように行うことができます。

<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>

また、複数のアイテムを並べて表示する場合は、通常、floatも推奨されます。例：

<div>
  <img src="image1.png" style="float: left;" />
  <img src="image2.png" style="float: left;" />
  <img src="image3.png" style="float: left;" />
</div>

これらの画像を同じ側に浮かせると、水平方向のスペースがある限り、隣り合って配置されます。

于 2012-07-11T18:34:16.507 に答える
8

これらの回答はすべて2016年以前にさかのぼります...を使用したこのための新しいWeb標準がありますflex-boxes。一般的floatsに、これらの種類の問題は今では眉をひそめています。

HTML

<div class="image-txt-container">
  <img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
  <h2>
    Text here
  </h2>
</div>

CSS

.image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

フィドルの例：https ：//jsfiddle.net/r8zgokeb/1/

于 2018-11-08T21:18:30.343 に答える
3

最近のdivは新しい規範です

<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>
于 2012-07-11T18:22:19.957 に答える
1

どうdisplay:inlineですか？

<html>
      <img src='#' style='display:inline;'/>
      <p style='display:inline;'> Some text </p>
</html>
于 2012-07-11T18:23:18.600 に答える
1

通常、私はこれを行います：

<div>
   <p> 
       <img src='1.jpg' align='left' />
       Text Here
   <p>
</div>
于 2012-07-18T07:19:47.633 に答える
0

それはあなたが何をしたいか、そしてあなたが表示しているデータ/情報の種類に依存します。一般に、テーブルは表形式のデータを表示するために予約されています。

状況に応じて、cssを使用することもできます。簡単なオプションは、画像をフロートさせてマージンを与えることです。

<p>
    <img style="float: left; margin: 5px;" ... />
    Text goes here...
</p>

これにより、テキストが画像に折り返されます。テキストを画像に巻き付けたくない場合は、テキストを別のコンテナに入れます。

<div>
    <img style="float: left; margin: ...;" ... />
    <p style="float: right;">Text goes here...</p>
</div>

希望どおりに表示するには、段落タグに幅を割り当てる必要がある場合があることに注意してください。また、float要素の下に表示される要素については、「clear：left;」というスタイルを追加する必要がある場合があることに注意してください。（またはクリア：正しい、またはクリア：両方）。

于 2012-07-11T18:31:57.510 に答える
0

negative marginとても助かります！

htmlDOMは次のようになります。

<div class="main">
  <div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>

そしてCSS：

.main {
  float:left;
  width:100%;
}

.main_body{
  margin-left:210px;
  height:200px;
}
.left{
  float:left;
  width:200px;
  height:200px;
  margin-left:-100%;
}

それmain_bodyが反応する意志、それがあなたを助けるかもしれません！

于 2016-03-10T07:33:07.840 に答える
-1

<DIV>タグで画像を呼び出してみてください。これにより、読み込み時間がスムーズかつ高速になります。これは背景画像であるため、<DIV></DIV>タグ間の画像の上にテキストを配置することもできます。これは、カスタムストア/ショップのリストにも最適です...クールな「売り切れ！」オーバーレイ、またはあなたが望むかもしれないものを投稿するために。

ブログ投稿や記事リストに使用できるpic/text-sidedbysideバージョンは次のとおりです。

<div class="whatever_container">
<h2>Title/Header Here</h2>
 <div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>
于 2016-09-13T13:37:03.587 に答える