DIV布局-DIV高度不同自动换行并对齐《转》

每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐。

刚开始的效果:

给出了完美解决方案:

效果:

因为要支持每个div可删除,删除后,后面的div自动补齐,所以用table不显示(除非想自虐的人可以试下)

最终就是css修改了一下就搞定了。。。

 1 <html>
 2 <head>
 3 <style>
 4 .test_area{
 5         width:100%;
 6         background-color:#FFFFFF;
 7         min-height:120px;
 8         overflow: auto
 9 }
10 .test_ans{
11     background-color:#ebebeb;
12     //float:left;
13     margin-left:10px;
14     margin-top:5px;
15     margin-bottom:5px;
16     min-height:100px;
17     width:200px;
18     border:1px solid #808080;
19     border-radius:10px;
20     text-align: left;
21     cursor:move;
22     position:relative;
23     vertical-align: top;
24     display:inline-block;
25 }
26 .test_desc{
27     width:100px;
28     margin-left:10px;
29     margin-top:10px;
30     float:left;
31     word-break:break-all;
32     line-height: 1.5;
33 }
34
35 </style>
36
37 </head>
38 <div class="test_area" style="width:809px">
39     <div class="test_ans">
40         <div class="test_desc" >
41         <font color="#000000">1231 2312 312 31 2123123 123 123 123 123 123 123 123123 12312 3123 123 123 123 123 1212</font>
42         </div>
43     </div>
44     <div class="test_ans">
45         <div class="test_desc">
46         <font color="#000000">1231 232</font>
47         </div>
48     </div>
49     <div class="test_ans">
50         <div class="test_desc">
51         <font color="#000000">1231 2312 312 31 312312</font>
52         </div>
53     </div>
54     <div class="test_ans">
55         <div class="test_desc">
56         <font color="#000000">1231 2312 312 31 123 123123 123123 12312312</font>
57         </div>
58     </div>
59     <div class="test_ans">
60         <div class="test_desc">
61         <font color="#000000">1231 2312 312 31 123 123 123 123 123 123123 123123 12312312</font>
62         </div>
63     </div>
64     <div class="test_ans">
65         <div class="test_desc">
66         <font color="#000000">1231 2312 312 31 2123123 123123 123123 12312312</font>
67         </div>
68     </div>
69     <div class="test_ans">
70         <div class="test_desc">
71         <font color="#000000">1231 2312 312 31 123 123123 123123 12312312</font>
72         </div>
73     </div>
74 </div>
75 </html>
时间: 2024-12-26 17:21:09

DIV布局-DIV高度不同自动换行并对齐《转》的相关文章

【html】【10】div布局[div水平垂直居中]

必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置成不同的值. 例子: 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

CSS技巧!像table一样布局div

许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示. 但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题. 其实有个简单的方法,使用display:table, display:table-row and display:table-cel

关于css+div布局的疑问 2017-03-19

第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素):但是,在纸上花的草图再好再精确,也需要实际操练. 2.定位问题:明明都定位了,为什么还出现div布局混乱的现象? (未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误? 3.div中图片的定位,为什么按照理论设

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

6.4 DIV布局制作淘宝首页

为了加深对DIV层布局的理解,下面就来体验一把什么是DIV层布局. 使用Dreamweaver来绘制如图1所示的层布局页面,具体操作岁骤如下: 图1 DIV层布局页面 (1) 打开Dreamweaver,新建一个空白文档. (2) 在插入栏的“布局”类别中单击“绘制层”按钮. (3) 在“文档”窗口的“设计”视图中,执行下列操作之一: ●  按下鼠标左键拖动以绘制一个层. ●  通过按住Ctrl键并按下鼠标左键进行拖动来连续绘制多个层(只要不松开Ctrl键,就可以继续绘制新的层). (4) 绘制

div中文字超出时自动换行

    在开发中很容易遇到div中文字超出的问题,在此总结以下方法: white-space 属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支持 white-space 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. nowrap

Flex转型Html学习随笔1——关于Html页面的div布局(下)

之前研究了div的垂直和水平布局,接下来研究下Flex中Group(Canvas)的类似效果在div中如何实现. 关键字:position 吸取了之前float:left设置在父容器中没有效果的教训,这个position:absolute果断先设置在子元素上 <body> <div class="redRect"> <div class="blueRect" style="position:absolute;left:20px

DW的div布局

如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页.因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常

在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下.由www.169it.com 搜集整理 代码1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Transit