最近弄了一个动态添加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. Kibana安装及部署

    安装及部署 一.环境配置 操作系统:Cent OS 7 Kibana版本:3.1.2 JDK版本:1.7.0_51 SSH Secure Shell版本:XShell 5 二.操作过程 1.下载指定版 ...

  2. html5 xdm 页面之间的通信

    <!-- 这个是父页面xdm.html --><!DOCTYPE html> <html> <head> <meta charset=" ...

  3. Angular SEO方案

    1.如果是java web项目,可以直接使用AngularSEO Filter. 官网地址 :http://www.angularseo.net/#about <filter> <f ...

  4. 计算机视觉：关于视觉算法源码中常出现的imageLib库的使用指南

    1.ReadImage(CImage &im, char* path)/ WriteImage(CImage &im, char* path) (1)将im强制转换为CByteImag ...

  5. Js 设置class，兼容ie,火狐的方式

    var trs = document.getElementsByTagName("tr"); trs[0].className="color2";  //设置c ...

  6. UINavigationItem UINavigationBar 关系分析[转]

    http://blog.csdn.net/luoyeffcs/article/details/16106707 目录 1.关系分析 2.关系综述 3.概念点 4.疑问 1.关系分析 UIBarItem ...

  7. finder文件目录跳转快捷键

    finder文件目录跳转快捷键 command+shift+G

  8. Java分布式Socket监控项目思考

    内容说明 一项课程作业Java编写Socket长连接监控分布式终端,并将终端状态写入数据库供前端查询 基础:c++/Posix/APUE/Mysql&sqlite 核心内容:Socket/线程 ...

  9. Windows：文件服务器，访问进去不能查看到完整的文件

    文件服务器,访问进去不能查看到完整的文件:别人访问却可以查看到完整的所有文件 可能是登录的帐号串掉导致,删除文件服务器帐号,重新访问: cmd: net use /delete *

  10. mongodb 的安装和使用

    官方网址 http://www.mongodb.org 1.下载mongodb-win32-i386-latest.zip 解压 mongodb 3.1.5 需要 win7 下 下载安装内存补丁 ht ...