`
齐晓威_518
  • 浏览: 618021 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

动态显示数据自动换行的另一种方法!

 
阅读更多

产品显示的时候,我遇到换行的问题采用的方法是:假如要一行显示4张产品图片,那么就先定义一个变量,初始值设置为1,每执行一次就加1,然后判断这个值是不是4的整数倍,是的话就输出标签</tr><tr>,那么就刚好与前面的<tr>配对,但是最后总会多出一组多余的标签</tr><tr>,虽然不影响效果,可是每次都觉得不爽。
  最近在学习DIV+CSS,偶然发现,一般DIV是按照横向排列的,而且当子DIV的宽度总长度大于父DIV长度的时候,那么后来加上去的子DIV就会被”挤“到下一行。所以利用这个特性就能很方便的实现自动换行了。
代码如下,现在需要做的就是将子DIV标签的内容循环就可以了(比如我们从数据库中选取top  n条记录,不用考虑其他的东西,只要将父、子标签的宽度调整好就可以自动换行了)希望能作抛砖引玉之用:

 

<style>

 

<!--

 

#fdiv{

 

WIDTH:610px;/*可以适当放宽一点点*/

 

MARGIN-RIGHT: auto;

 

MARGIN-LEFT: auto; 

 

PADDING: 0px;

 

TEXT-ALIGN: center;

 

BORDER:#000000 1px solid;

 

}

 

#sdiv{

 

FLOAT:left;

 

WIDTH:150px;

 

HEIGHT:90px;

 

border: 1px dashed #cccccc;

 

}

 

-->

 

</style>

 

 

 

<div id="fdiv">

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

</div>

 

 

 

分享到:
评论

相关推荐

    动态添加标签与自动换行

    CSS Grid布局是另一种强大的二维布局系统,可以同时控制行和列。通过设置`grid-auto-flow`属性,可以在网格中实现自动换行。例如,`grid-auto-flow: row;`将使得元素按行填充,当一行填满后会自动开始新的一行,...

    FastReport自动换行及行高自适应

    2. 行高自适应:另一种方法是在设计时预留一行的高度,并设置memo的StretchMode属性为smActualHeight,同时将WordWrap属性设置为true。此外,需要将band的Stretched属性设置为true。例如,对于MasterData的Stretched...

    ckeditor纯数字和纯字母不能换行问题

    另一种思路是从HTML的角度出发,通过调整文本的格式来实现换行。 - **插入换行符 ` `**:在纯数字或纯字母之间手动插入 ` ` 标签,强制实现换行。 - **使用 `&lt;pre&gt;` 标签**:将文本包裹在 `&lt;pre&gt;` 标签中,...

    横向合并单元格.zip

    2. 另一种方法是利用`GridView`的`MergeCells`方法,提供需要合并的起始单元格和结束单元格的索引。这适用于动态合并或者根据业务逻辑决定合并的情况。 3. 为了处理复杂情况,例如合并多行或多列,可以使用`...

    LCD显示任意字符函数,包含ST7789初始化函数

    图片的取点方式有两种:一种是按颜色索引取点,另一种是按RGB值取点。前者适用于索引颜色模式的图片,后者适用于真彩色图片。 5. **自动换行**:在文本显示时,当一行字符满后,驱动程序需要自动换行到下一行。这...

    AutoTextViewSample两种方法

    本文将深入探讨两种实现AutoTextView的方法:一种是通过代码动态设置,另一种是在XML布局文件中预定义。 首先,我们来看第一种方法——在代码中设置AutoTextView。这种方法适用于动态加载数据或者需要在运行时决定...

    3Dtext 3D文字

    Visual Basic是一种广泛使用的编程语言,特别适合开发Windows桌面应用程序,包括图形用户界面(GUI)元素如3D文本。 压缩包中的文件名列表提供了关于项目结构的线索: 1. `Imgpb.xpt` - 这可能是一个扩展名为.xpt...

    GridView的19种操作(删除,编辑,添加等)

    7. **鼠标移到某一行改变背景色方法二**:另一种实现方式,可能使用了服务器端事件,如`GridView1_RowMouseOver`。 8. **实现删除时弹出确认对话框**:在删除操作前,通常会显示一个确认对话框,确保用户不会意外...

    GridView的19种操作

    7. **鼠标移到某一行改变背景色方法二**:另一种方法是使用jQuery或者其他JavaScript库,监听mouseover/mouseout事件,动态改变行的样式。 8. **删除时弹出确认对话框**:在RowDeleting事件中,添加一个确认对话框...

    GridView72绝技.docx

    有两种方法实现,一种是在CSS中定义:hover伪类,另一种是使用JavaScript或jQuery监听鼠标移过事件。 7. **自动编号**: 可以通过添加一个TemplateField,然后在后台代码中动态生成行号。 8. **自定义格式化**: ...

    Radmin自动登录器v3.0

    * 先右击某条记录(或F9)填为强制代理(支持域名),并选中强制代理选项,便可对另一条记录强制进行代理连接(将忽略私有代理); * 支持鼠标滚轮; * 主菜单和右键菜单均可完成本程序的常规操作;记录窗格的右键菜单...

    ios-Swift 滚动文字和图片,一行两行或多行.zip

    另一种方法是使用UIStackView,它可以方便地将多个视图水平或垂直堆叠,并能自动处理布局和滚动。 对于滚动图片,我们可以使用UIImageView控件配合UIScrollView。首先,将UIImageView添加到UIScrollView中,然后...

    文本编辑器(数据结构)

    此外,多行文本编辑还需要处理行号的计算和显示,以及文本的换行和自动缩进。 在实现这些功能时,**数据结构的选择**至关重要。例如,文本的存储可能使用链表、数组、树或其他高级结构,每种都有其优缺点。链表便于...

    IOS 仿聊天软件对话布局

    2. **左右消息布局**:在聊天应用中,通常会有两种不同的布局,一种是左侧代表发送的消息,另一种是右侧代表接收的消息。自定义单元格时,我们需要根据消息的方向(发送或接收)调整其布局,包括文字、气泡背景色...

    ios-自适应高度tableView表单.zip

    在iOS开发中,UITableView是一种非常常见且重要的组件,它用于展示列表形式的数据。"ios-自适应高度tableView表单.zip" 提供了一个示例项目,旨在演示如何在iOS应用中创建一个能自适应高度的表格视图,这在处理表单...

    WPF页面布局DEMO

    - `WrapPanel`:元素按行或列自动换行,常用于创建列表或菜单。 2. **界面操作** 在WPF中,可以通过事件处理程序与用户进行交互。例如,`MouseLeftButtonDown` 可以响应鼠标左键点击事件,`KeyDown` 可以处理键盘...

    带行号和标尺的RichTextBox自定义控件源码

    标尺则可能是另一种形式的自定义控件,它可以用来指示文本的缩进级别或者对齐方式。开发者可能需要创建一个新的控件,或者使用现有的标尺控件(如果有的话),并将其与`RichTextBox`的文本位置关联起来。标尺的刻度...

Global site tag (gtag.js) - Google Analytics