1

これは、専門家のアドバイスが必要な一般的な Web 開発の質問のようなものです。これはおそらく非常に簡単なことですが、これを正しく表示するのに問題があります。

各エントリに 5 つのテキスト フィールドと 1 つの画像があるデータベース テーブルをセットアップしました。私がやりたいのは、リピーターを使用して、div の左側にテキストを表示し、div の右側に画像を表示することです (基本的にテキストの中央に揃えます)。 

Company Name
Description1
Description2
Description3                                       Image goes about here.
Description4
Description5

リピーターはすべて適切に構成されており、すぐに使用できます。適切にフォーマットされた方法でテキストが表示されます。ただし、その画像を正しく表示するのに問題があります。これを行うには、ここでテキストの折り返しを使用する必要がありますか? 私はかなり立ち往生していて、どこに進むべきかわかりません。必要に応じて、ここに ASP.net コードを投稿できます。

よろしくお願いします。新しいプログラマーにとって非常に役立つサイト。

4

3 に答える 3

0

内側のテキストを含む div を左に、画像を右側に配置する場合は、「Float: Left」を使用してテキストを内側に、「float:right」を画像の div に使用できます。これは次のようになります。

<div style="float: left;"> <--- float:left
   <table>
    <asp:Repeater ID="TournoiAvenirRep" runat="server">
         <ItemTemplate>
             <tr>
                <td>...</td>
             </tr>
         </ItemTemplate>
    </asp:Repeater>
   </table>
</div>

<div style="float:right"> <--- float:right
  <img  src='...' />
</div>

また、別の div を同じ行に配置したくない場合は、新しい div に「clear:both」を追加する必要があります。

<div style="float: left;"> 
   <table>
    <asp:Repeater ID="TournoiAvenirRep" runat="server">
         <ItemTemplate>
             <tr>
                <td>...</td>
             </tr>
         </ItemTemplate>
    </asp:Repeater>
   </table>
</div>

<div style="float:right">
  <img  src='...' />
</div>

<div style="clear:both"> <------ here clear both
   ...
</div>

これがあなたを助けることを願っています! 、ビンク

編集: css の配置とフロートについて詳しく知りたい場合は、W3 学校に行くことができます。

于 2013-05-17T19:44:45.550 に答える
0

列の div に固定の高さを設定できないと思いますか? そうです。HTML を使用することに満足している場合table(多くはそうではありません)、CSS を使用してフローティング div 内で画像を垂直方向に配置しようとするよりも、はるかに簡単になります。これを試して：

<!DOCTYPE html>
<html>
<body>

<table style="width:960px; margin:auto 0;">
    <tr>
        <td style="width:75%;">
            <asp:repeater...>
            </asp:repeater>
        </td>
        <td style="width:25%;" valign="middle">
            <asp:Image .../>
        </td>
    </tr>
</table>

valign="middle"右側の属性に注意してくださいtd。valignHTML5 では廃止されましたが、最新のすべてのブラウザーとサポートされているすべてのバージョンの IE で引き続き機能します。

注: テーブルは SEO に適していない、またはテーブルは SEO に適していないと主張する人が多く、厳密には html5 に準拠していないため、それを改善する必要があります。個人的には、CSS がばかげたハックなしでは解決できない単純な問題を解決するだけなので、あまり気にせずに使用できます。

于 2013-05-17T20:17:28.050 に答える
-2

これは CSS の問題です。次のような 2 つのフローティング div が必要です。

<div class="clearfix">
    <div style="float:left; width:75%;">
        <asp:Repeater ID="MyRepeater" runat="server" [etc] />
    </div>
    <div style="float:right; width:25%;">
        <asp:Image ID="MyImage" runat="server" [etc] />
    </div>
</div>

具体的な例が必要な場合は、http://www.vanseodesign.com/css/vertical-centering/ を参照してください。

于 2013-05-17T17:09:08.537 に答える