码迷,mamicode.com
首页 > 其他好文 > 详细

DIV布局-DIV高度不同自动换行并对齐《转》

时间:2015-12-15 12:27:13      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐。

刚开始的效果:

技术分享

给出了完美解决方案:

效果:

技术分享

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

 

最终就是css修改了一下就搞定了。。。

 1 <html>
 2 <head>
 3 <style>
 4 .test_area{
 5         width:100%;
 6         background-color:#FFFFFF;
 7         min-height:120px;
 8         overflow: auto
 9 }
10 .test_ans{
11     background-color:#ebebeb;
12     //float:left;
13     margin-left:10px;
14     margin-top:5px;
15     margin-bottom:5px;
16     min-height:100px;
17     width:200px;
18     border:1px solid #808080;
19     border-radius:10px;        
20     text-align: left;
21     cursor:move;
22     position:relative;
23     vertical-align: top;
24     display:inline-block;
25 }
26 .test_desc{
27     width:100px;
28     margin-left:10px;
29     margin-top:10px;
30     float:left;
31     word-break:break-all;
32     line-height: 1.5;
33 }
34 
35 </style>
36 
37 </head>
38 <div class="test_area" style="width:809px">
39     <div class="test_ans">
40         <div class="test_desc" >
41         <font color="#000000">1231 2312 312 31 2123123 123 123 123 123 123 123 123123 12312 3123 123 123 123 123 1212</font>
42         </div>
43     </div>
44     <div class="test_ans">
45         <div class="test_desc">
46         <font color="#000000">1231 232</font>
47         </div>
48     </div>
49     <div class="test_ans">
50         <div class="test_desc">
51         <font color="#000000">1231 2312 312 31 312312</font>
52         </div>
53     </div>
54     <div class="test_ans">
55         <div class="test_desc">
56         <font color="#000000">1231 2312 312 31 123 123123 123123 12312312</font>
57         </div>
58     </div>
59     <div class="test_ans">
60         <div class="test_desc">
61         <font color="#000000">1231 2312 312 31 123 123 123 123 123 123123 123123 12312312</font>
62         </div>
63     </div>
64     <div class="test_ans">
65         <div class="test_desc">
66         <font color="#000000">1231 2312 312 31 2123123 123123 123123 12312312</font>
67         </div>
68     </div>
69     <div class="test_ans">
70         <div class="test_desc">
71         <font color="#000000">1231 2312 312 31 123 123123 123123 12312312</font>
72         </div>
73     </div>
74 </div>
75 </html>

 

DIV布局-DIV高度不同自动换行并对齐《转》

标签:

原文地址:http://www.cnblogs.com/LceMeaning/p/5047568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!