ListView ItemTemplate 中的 CSS（浮动）问题！答案

【问题标题】：Problem with CSS(floating) in ListView ItemTemplate!ListView ItemTemplate 中的 CSS（浮动）问题！
【发布时间】：2009-12-08 10:30:28
【问题描述】：

我是 CSS 新手，在 ItemTemplate 标记中设置 ListView 控件的样式时遇到问题。
我的项目语言是 rtl（波斯语），我想将用户图像设置在右侧，将她/他的信息设置在图像的左侧。
但这是结果：

alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-08_134217.png?attredirects=0&d=1

这是 ListView 的代码：

<asp:ListView ID="NokListView" runat="server" DataSourceID="ObjectDataSource1">
    <LayoutTemplate>
        <img alt="" src="./img/group.png"><br />
        <br />
        <fieldset>
            <legend>ليست کلي</legend>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
        </fieldset>
    </LayoutTemplate>
    <ItemSeparatorTemplate>
        <hr />
    </ItemSeparatorTemplate>
    <ItemTemplate>
        <img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
        <span>نام وارث:</span><%# Eval("FirstName") %>&nbsp;<%# Eval("LastName") %><span
            dir="ltr">(<%# Eval("Email") %>)</span><br />
        <span>نسبت او با شما:</span>
        <%# Eval("Relationship")%><br />
    </ItemTemplate>
</asp:ListView>

我将样式设置为 float:right 并且它可以正常工作，但是正如您所见，模板就像一个分层列表！
我希望每个项目都放在前一个项目下方而不是在前面。请解释一下到底发生了什么？！以及如何解决？

【问题讨论】：

如果你想把图片放在文本的左边，你应该使用float:left。
对不起。这是我的错误。我纠正了它。我想把图片放在右边，把文字放在左边。
无论哪种方式，只需将两个单独的内容块放在单独的 div 标签中，并使用它们自己的浮动设置。确保您在 GridView 上设置了足够的总宽度来适应这一点。还要在两个内容 div 上设置宽度。屏幕截图会有所帮助...

标签： asp.net css listview

【解决方案1】：

用 float:left 将非图像数据放在一个 div 中，看看是否有效？

【讨论】：

【解决方案2】：

我在这里找到了答案：doctype.com

完整的固定代码是：

<ItemSeparatorTemplate>
<hr style="clear:right;" />
</ItemSeparatorTemplate>
<ItemTemplate>
    <div style="clear: both;">
        <img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
        <span>نام وارث:</span><%# Eval("FirstName") %>&nbsp;<%# Eval("LastName") %>
        <span dir="ltr">(<%# Eval("Email") %>)</span><br />
        <span>نسبت او با شما:</span><%# Eval("Relationship")%><br />
    </div>
</ItemTemplate>

所以看看结果：

alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-09_103134.png?attredirects=0&d=1

【讨论】：