当前位置:编程学习 > C#/ASP.NET >>

如何使用Repeater实现双列显示


如上图, 能否用repeater实现双列显示。
附上上列部分代码
<table class="news_table">
                    <tr>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题一:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题5:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                    </tr>
                    <tr>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题2:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题5:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                    </tr>
                    <tr>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题3:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题5:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                    </tr>
                    <tr>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题4:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题5:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                    </tr>
                    <tr>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题5:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                        <td class="tdTitle">
                            <div class="divtitle"><img src="img/arrow.gif" /><a href="#">标题5:这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧这个标题有点长吧</a></div>
                        </td>
                        <td class="tdDate">[04-13]</td>
                    </tr>
                </table>
--------------------编程问答-------------------- 两个rpt罗~~

在cs中将数据
var data1 = data.Take(5);绑定到rpt1
var data2 = data.Skip(5).Take(5);绑定到rpt2

另外你hmtl代码中有很多img src=这个都会请求服务器 浪费请求
还是写成一个样式吧 也方便以后修改 --------------------编程问答-------------------- 另外一种方法是用js 控制css让 tr的飘来飘去 --------------------编程问答-------------------- 可以的,不需要2个repeater那样复杂,只需要在css里控制下长度,使得每行刚好显示2列,然后就换行 --------------------编程问答--------------------
引用 1 楼 moonwrite 的回复:
另外你hmtl代码中有很多img src=这个都会请求服务器 浪费请求
还是写成一个样式吧 也方便以后修改


多谢指点,这个只是静态页面设计时图省事,就直接复制粘贴在前台了,呵呵 --------------------编程问答--------------------
引用 3 楼 daijinhua 的回复:
可以的,不需要2个repeater那样复杂,只需要在css里控制下长度,使得每行刚好显示2列,然后就换行

问题在于,repeater的元素模板如何设置,如果只包含td,那就全在一行了,如果包含tr,那一行两个td都是同样的内容 --------------------编程问答--------------------
引用 5 楼 movytop 的回复:
引用 3 楼 daijinhua 的回复:可以的,不需要2个repeater那样复杂,只需要在css里控制下长度,使得每行刚好显示2列,然后就换行
问题在于,repeater的元素模板如何设置,如果只包含td,那就全在一行了,如果包含tr,那一行两个td都是同样的内容

改成<ul>和<li>其他不变就好了 这个可以问问美工的 他们懂的 --------------------编程问答-------------------- 1    6
2    7
3    8
4    9
5    10

如果是这么排,可以这么实现
1\用两个rp,第一个rp读1-5条记录,第二个rp读6-10条
2\用一个rp,然后用js将6-10移动到第二个td中 --------------------编程问答--------------------
引用 6 楼 daijinhua 的回复:
引用 5 楼 movytop 的回复:
引用 3 楼 daijinhua 的回复:可以的,不需要2个repeater那样复杂,只需要在css里控制下长度,使得每行刚好显示2列,然后就换行
问题在于,repeater的元素模板如何设置,如果只包含td,那就全在一行了,如果包含tr,那一行两个td都是同样的内容
改成<ul>和<li>其他不变就好了 这个可以问问美工的 他们懂的

你先写成<ul><li></li></ul>的格式  样式跟你的界面一样的样式 然后为每个数据绑定一个<li></li> 关键是样式 repeater 在浏览器中是不显示的 --------------------编程问答-------------------- 2个办法 第一 用css 每个li控制在50% float:left就好了

第二 用datalist直接有一个属性 设置2就行了
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,