近期很多列表都使用这个效果,虽然大小不一,但有序排列。先来看看效果
1234567890 1234567890 1234567890 1234567890 1234567890 1234567890
1234567890
1234567890 1234567890
1234567890 1234567890
1234567890 1234567890 1234567890 1234567890 1234567890
1234567890 1234567890 1234567890
1234567890
感觉怎么样,是不是乱中有序,别具一番风味。不多说,我们来看看关键代码:
.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;
}
特别提醒:代码中加粗部分是关键要素。