DIV佈局-DIV高度不一樣自動換行並對齊《轉》

時間 2019-11-12

標籤 div 佈局高度不一樣自動換行對齊欄目 CSS 简体版

原文原文鏈接

每一個div框內容有多有少，要支持div高度自適應，還要添加的div自動追加，而且換行還要保持每行對齊。css

剛開始的效果：html

給出了完美解決方案：spa

效果：code

由於要支持每一個div可刪除，刪除後，後面的div自動補齊，因此用table不顯示（除非想自虐的人能夠試下）htm

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

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。