Question

这是一个一般的Web开发问题，我需要一些专家的建议。对于你们中的一些人来说，这可能是非常简单的，但是我无法正确显示它。

我设置了一个数据库表，其中每个条目有5个文本字段和一个图像。我想要做的是使用转发器显示div左侧的文本，以及div右侧的图像（基本上与文本的中心对齐）。

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

我已经正确配置了转发器并准备就绪，它以格式良好的方式显示文本。但是，我无法正确显示该图像。我是否需要在此处使用文本换行来完成此操作？我很困难，不知道从哪里开始。如果需要，我可以在这里发布我的ASP.net代码。

提前非常感谢你。对于新程序员来说非常有用的网站。

Answer 1

如果你想让div的文本在左边，而图像在右边，你可以使用“Float：Left”到div里面的文本和“float：right”到div的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>

希望这会对你有所帮助！，vinc

编辑：如果你想了解更多关于css定位和浮动的知识，你可以去W3 school，他们有一些不错的tuto。

Answer 2

我假设您无法在列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属性。虽然HTML5中不推荐使用valign，但它仍适用于所有现代浏览器和所有受支持的IE版本。

注意：许多人会争辩说桌子不是SEO友好的，或者桌子不适合这个，加上它不是严格符合html5，所以你需要这样做。就个人而言，因为它只是起作用并且解决了一个简单的问题，CSS不能没有愚蠢的黑客，我会使用它而不用担心太多。

Answer 3

这是一个CSS问题。你需要两个浮动的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/。

ASP.net转发器显示格式正确的图像和文本

3 个答案: