DIV+CSS 高度不同的DIV自动换行并同行对齐

近期很多列表都使用这个效果,虽然大小不一,但有序排列。先来看看效果

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;
}

特别提醒:代码中加粗部分是关键要素。

发表评论

邮箱地址不会被公开。 必填项已用*标注