0

私がやりたいのは、DIV の vs. テーブルを使用することです。

画像を表示するのが好きで、その画像の右側にテキストを表示します。テキストは画像の上端に揃える必要があります。テキストと画像の間には、ある程度のスペースが必要です。

次のコードがありますが、画像が表示され、その下にテキストが表示されるようです:

     <div style="float:left">
        <img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
     </div>  

     <div style="clear:left"></div>

     <div style="float:left">    
         %#Eval("title")  
     </div>

     <div style="clear:left"></div>
4

5 に答える 5

0

フロート/オーバーフローのトリックを使用できます:

<div class="imgCont">
    <img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">    
    %#Eval("title")  
</div>

インライン スタイリングの代わりにクラスを使用しました。

.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}

JSFiddle

于 2013-09-24T17:20:02.427 に答える
0

最初だけ削除すればいい

<div style="clear:left"></div>
于 2013-09-24T17:14:19.890 に答える
0

この 2 つの div がある理由がわかりません: 

<div style="clear:left"></div>

それらは、テキスト div と画像 div が同じ行にならないようにするだけです。Css プロパティを「クリア」すると、コンテナが別のコンテナをフローティングさせないようにします。ここでは左側にあります。

 <div style="float:left">
    <img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
 </div>  

 <div style="float:left">    
     %#Eval("title")  
 </div>

十分でしょう

于 2013-09-24T17:18:02.833 に答える
0

これが答えです！

明らかに使用しますdiv。これが簡単な例です！

最初に親divを作成してから、その親 div 内に、次のような 2 つの div を作成できます。

<div>
  <div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
  <div class="float-right">The text that would flow at the right side..</div>
</div>

そのためのCSSがこちらです。

  1. それらをインラインで表示します！つまり、左に 1 つの div、右に 1 つの div です!

  2. 上隅にテキストが表示されます。margin-topこれは、テキスト div に対してno を意味します。

CSSコードは次のとおりです。

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-left, .float-right {
  display: inline; // use inline-block if you want to add padding or margins..
}

このように、画像のある div は左側に配置され、他の div は右側に配置されます。そして二人は一列に並びます。あなたが望むように。

がんばれ、乾杯！:)

于 2013-09-24T17:18:40.950 に答える
0

HTML :

<div id="wrapper">
     <img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
     <div>image</div>
</div>

CSS :

#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
于 2013-09-24T17:17:24.357 に答える