最近弄了一个动态添加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. oracle 创建表空间

    --创建数据表空间 create tablespace hcm logging datafile 'G:\oracle\product\10.2.0\oradata\orcl\mydata.dbf' ...

  2. Protocol Buffer技术

    转载自http://www.cnblogs.com/stephen-liu74/archive/2013/01/02/2841485.html 该系列Blog的内容主体主要源自于Protocol Bu ...

  3. java的基本认识

    一.java的特点: 1.跨平台性:不受计算机硬件及操作系统的约束而在任意计算机环境下运行. 2.面向对象:以对象为基本粒度,基下包含属性和方法. 3.安全性:语言级安全性.编译性安全性.运行时安全性 ...

  4. [家里蹲大学数学杂志]第053期Legendre变换

    $\bf 题目$. 设 $\calX$ 是一个 $B$ 空间, $f:\calX\to \overline{\bbR}\sex{\equiv \bbR\cap\sed{\infty}}$ 是连续的凸泛 ...

  5. 关于http协议详解

    Author :Jeffrey 引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前 ...

  6. NDK SO 库开发与使用中的 ABI 构架选择

    Bugtags V1.2.7 引入了 NDK SO 库,在集成的时候,遇到不同的 SO 库打包到 APK 时,安装在某些机器上,出现 java.lang.UnsatisfiedLinkError 加载 ...

  7. javax.servlet.ServletException: java.lang.LinkageError: loader constraint violation:

    javax.servlet.ServletException: java.lang.LinkageError: loader constraint violation: when resolving ...

  8. Chap5: question: 29 - 31

    29. 数组中出现次数超过一半的数字. 方法a. 排序取中       O(nlogn). 方法b. partition 函数分割找中位数     >=O(n). 方法c. 设计数变量,扫描一遍 ...

  9. JAVAWEB监听器（二）

    监听域对象中属性的变更的监听器 域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信息事 ...

  10. ASPxSpinEdit 控件的三元判断

    方法一:<dx:ASPxSpinEdit ID=" DisplayFormatString="c" Width="100px"></ ...