最近弄了一个动态添加div框，每个div框内容有多有少，要支持div高度自适应，还要添加的div自动追加，并且换行还要保持每行对齐。

刚开始的效果：

要改啊，搞不定，问了UI高手，终于给出了完美解决方案：

效果：

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

最终就是css修改了一下就搞定了，术业专攻啊。。。

<html>

<head>

<style>

.test_area{

        width:100%;

        background-color:#FFFFFF;

        min-height:120px;

        overflow: auto

}

.test_ans{

    background-color:#ebebeb;

    //float:left;

    margin-left:10px;

    margin-top:5px;

    margin-bottom:5px;

    min-height:100px;

    width:200px;

    border:1px solid #808080;

    border-radius:10px;

    text-align: left;

    cursor:move;

    position:relative;

    vertical-align: top;

    display:inline-block;

}

.test_desc{

    width:100px;

    margin-left:10px;

    margin-top:10px;

    float:left;

    word-break:break-all;

    line-height: 1.5;

}

</style>

</head>

<div class="test_area" style="width:809px">

    <div class="test_ans">

        <div class="test_desc" >

        <font color="#000000">1231 2312 312 31 2123123 123 123 123 123 123 123 123123 12312 3123 123 123 123 123 1212</font>

        </div>

    </div>

    <div class="test_ans">

        <div class="test_desc">

        <font color="#000000">1231 232</font>

        </div>

    </div>

    <div class="test_ans">

        <div class="test_desc">

        <font color="#000000">1231 2312 312 31 312312</font>

        </div>

    </div>

    <div class="test_ans">

        <div class="test_desc">

        <font color="#000000">1231 2312 312 31 123 123123 123123 12312312</font>

        </div>

    </div>

    <div class="test_ans">

        <div class="test_desc">

        <font color="#000000">1231 2312 312 31 123 123 123 123 123 123123 123123 12312312</font>

        </div>

    </div>

    <div class="test_ans">

        <div class="test_desc">

        <font color="#000000">1231 2312 312 31 2123123 123123 123123 12312312</font>

        </div>

    </div>

    <div class="test_ans">

        <div class="test_desc">

        <font color="#000000">1231 2312 312 31 123 123123 123123 12312312</font>

        </div>

    </div>

</div>

</html>

完工！

DIV布局-高度不同DIV，自动换行并对齐的更多相关文章

  1. CSS+DIV布局初练—DIV元素必须成对出现？

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  2. 里面的div怎么撑开外面的div让高度自适应

    参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...

  3. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  4. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  5. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

  6. HTML DIV中文字自动换行 , 顶部对齐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  7. 父元素高度不确定，子元素左右等高的div布局

    上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...

  8. 左右两栏div布局，高度自适应

    页面结构如下: <div class="container"> <div class="left"> left </div> ...

  9. (转)盒子概念和DiV布局

    CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...

随机推荐

  1. POJ1229 域名匹配

    给你两个域名,域名中包含一些通配符. * :匹配一个或任意多个部分 ?:匹配一个或三个部分 !:匹配三个以上部分. 求这两个域名是否能够表示同一个域名? 域名的长度不超过255. 分析:设给出的域名为 ...

  2. 【freemaker】之文本,html文本,去除空格,字母大小写,循环数组,字符串截取,map取值,遍历map

    测试代码 @Test public void test06(){ try { root.put("emp", "<span color='red'>你好张三& ...

  3. vim全选，全部复制，全部删除

    全选(高亮显示):按esc后,然后ggvG或者ggVG 全部复制:按esc后,然后ggyG 全部删除:按esc后,然后dG 解析: gg:是让光标移到首行,在vim才有效,vi中无效 v : 是进入V ...

  4. 【uTenux实验】任务管理

    任务就是一个无限循环.uTenux提供的任务管理功能是很强大的,包括建立和删除一个任务,启动或退出任务,取消一个任务的启动请求,改变任务的优先级和査询任务状态,使任务进人睡眠状态和唤醒状态,取消唤醒请 ...

  5. [家里蹲大学数学杂志]第432期Hardy type inequalities

    If $p>1$, $f\geq 0$, and $$\bex F(x)=\int_0^x f(t)\rd t, \eex$$ then $$\bee\label{Hardy:0 to x} \ ...

  6. java 线程数据同步

    java 线程数据同步 由买票实例 //java线程实例 //线程数据同步 //卖票问题 //避免重复卖票 //线程 class xc1 implements Runnable{ //定义为静态,可以 ...

  7. VG vs SS WE vs IM [20160815]

    上单:慎,纳尔,艾克,艾瑞莉娅,普朗克 中单:弗拉基米尔,玛尔扎哈,卡尔玛,丽桑卓,索尔,崔斯特,辛德拉 打野:雷克赛,奈德丽,古拉加斯,伊莉丝,赫卡里姆,玛尔扎哈 下路:艾希,克格莫,烬,希维尔,布 ...

  8. [计算机取证技术] VDI-in-a-Box Analysis Results

    原文跳转: http://dig4n6.blogspot.tw/2013/07/vdi-in-box-analysis-results.html *文中引用图片如无法浏览,请科学上网* VDI-in- ...

  9. 在.NET中使用EPPlus生成Excel报表 .

    --摘抄自:http://blog.csdn.net/zhoufoxcn/article/details/14112473 在开发.NET应用中可能会遇到需要生成带图表(Chart)的Excel报表的 ...

  10. 刷了OpenWrt Attitude Adjustment 12.09，很满意

    OpenWrt的这个新版本编译好的固件里集成了luci,图形界面还是很方便的. 装了wpad.qos之后,空间刚好剩下一点点,囧,4M闪存还是不够折腾啊. 发现一个bug:如果空间不够的情况下继续安装 ...