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

每个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>

 

posted @ 2015-12-15 11:15  冰意 LceMeaning  阅读(1109)  评论(0编辑  收藏  举报