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>

 

转载于:https://www.cnblogs.com/LceMeaning/p/5047568.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值