最近弄了一个动态添加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. Xamarin.Froms项目中包含的文件

    Clearly, the program created by the Xamarin.Forms template is very simple, so this is an excellent o ...

  2. strong reference cycle in block

    However, because the reference is weak, the object that self points to could be deallocated while th ...

  3. ios base64图片上传失败问题

    今天做图片上传,后台用的是base64解密图片二进制文件,以前都是用表单上传来解决图片上传的,现在后台没有人改,所以研究下base64上传. 需要将图片base64加密,但是调用 [data base ...

  4. tsclient rdesktop remina freerdp

  5. CPU阿甘

    本系列文章全部摘选自"码农翻身"公众号,仅供个人学习和分享之用.文章会给出原文的链接地址,希望不会涉及到版权问题. 个人感言:真正的知识是深入浅出的,码农翻身" 公共号将 ...

  6. SQL笔记-第六章，索引与约束

    一.索引 CREATE INDEX 索引名 ON 表名(字段1, 字段2,……字段n) CREATE INDEX idx_person_nameage ON T_Person(FName,FAge) ...

  7. Eclipse/MyEclipse怎么设置个性化代码注释模板

    1.打开Eclipse/MyEclipse工具,打开或创建一个Java工程,点击菜单Window->Preferences弹出首选项设置窗口 2.展开左侧Java->Code Style- ...

  8. Visual Studio 2015完全离线安装

    虽然微软提供了Visual Studio的ISO镜像下载,但这个ISO文件并不完整,安装的过程中依然需要联网下载一些安装包,在中国特色的网络环境下导致安装过程还是非常慢的.另外,在一些网络隔离的环境中 ...

  9. MySQL的表的优化和列类型的选择

    列选择原则: 1:字段类型优先级 整型 > date,time  >  enum,char>varchar > blob 列的特点分析: 整型: 定长,没有国家/地区之分,没有 ...

  10. XidianOJ 1176 ship

    题目描述 The members of XDU-ACM group went camp this summer holiday. They came across a river one day. T ...