1

这是一个一般的网络开发问题，我需要一些专家的建议。对于你们中的一些人来说，这可能是一件很容易的事，但我无法让它正确显示。

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

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

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

非常感谢你。对新程序员很有帮助的网站。

4

3 回答 3

0

如果你想让 div 里面的文本在左边，图像在右边，你可以对里面有文本的 div 使用“float:left”，对图像的 div 使用“float:right”。这应该是这样的：

<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。尽管valign在 HTML5 中已弃用，但它仍然适用于所有现代浏览器和所有受支持的 IE 版本。

注意：许多人会争辩说表格不是 SEO 友好的，或者表格不是为此而设计的，而且它不是严格符合 html5 的，所以你需要这样做。就个人而言，因为它只是工作并解决了一个简单的问题，CSS 没有愚蠢的 hacks 就无法解决，我会使用它而不用担心太多。

于 2013-05-17T20:17:28.050 回答
-2

这是一个 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/。

于 2013-05-17T17:09:08.537 回答