最近弄了一个动态添加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. Longest Substring Without Repeating Characters -- LeetCode

    原题链接: http://oj.leetcode.com/problems/longest-substring-without-repeating-characters/ 这道题用的方法是在LeetC ...

  2. OAF_文件系列1_实现OAF文件上传和下载MessageFileUpload/MessageDownload（案例）

    20150707 Created By BaoXinjian

  3. Eclipse集成javap查看字节码

    分析java语言特性的一个好帮手是使用javap工具查看java编译后的字节码,楼主今天在学习java泛型中的桥方法时遇到一些不解,想到javap这个好工具可以帮助解答一些疑惑,索性就捣鼓如何在ecl ...

  4. apache配置Options详解

    http://www.365mini.com/page/apache-options-directive.htm Options指令是Apache配置文件中一个比较常见也比较重要的指令,Options ...

  5. json（http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html）

    http://www.cnblogs.com/lanxuezaipiao/archive/2013/05/24/3096437.html

  6. hbase运行shell时ERROR:org.apache.hadoop.hbase.PleaseHoldException: Master is initializing 的解决办法

    这个问题困扰了我一天多的时间,百度搜索的前几条的答案也是很扯淡的,说什么把/etc/hosts文件下的127.0.1.1改成127.0.0.1就行了,我也只能呵呵了.今天早上起得很晚,中午迪哥请我们去 ...

  7. 0，SFDC 管理员篇 - 整体框架

    SFDC 框架布局, 通过以下分类我们可以了解Salesforce 每个云上所提供的功能和用途. ●销售云 Sales Cloud 销售自动化(Sales ForceAutomation,SFA)&a ...

  8. java新项目的eclipse统一配置记录

    1.new java file的模版 /** * @Title:${file_name} * @Copyright: Copyright (c) 2016 * @Description: * < ...

  9. Linux系统man查询命令等级及意义

    1:用户命令,可由任何人启动的 2:系统调用,由内核提供的函数 3:库函数 4:设备,/dev目录下的特殊文件 5:文件格式描述,例如/etc/passwd 6:游戏 7:杂项,例如宏命令包.惯例等 ...

  10. 'telnet' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

    在telnet与ftp服务器相连时出现的问题: 原因:windows自带telnet,只是没有安装 解决如下: 然后关机重启