CSS小测1比较好的布局实现实例页面

回到相关文章 »

效果：

宽度调节(240-414)：

字号调节(12-16)：

1. absolute实现

手机系统
Android
登录方式
QQ互联登录
绑定事件
2019-01-02 00:01
绑定状态
成功
备注
如果需要修改绑定，请联系HR进行修改

2. flex实现

手机系统
Android
登录方式
QQ互联登录
绑定事件
2019-01-02 00:01
绑定状态
成功
备注
如果需要修改绑定，请联系HR进行修改

3. grid实现

手机系统
Android
登录方式
QQ互联登录
绑定事件
2019-01-02 00:01
绑定状态
成功
备注
如果需要修改绑定，请联系HR进行修改

4. float实现

手机系统
Android
登录方式
QQ互联登录
绑定事件
2019-01-02 00:01
绑定状态
成功
备注
如果需要修改绑定，请联系HR进行修改

5. 流体特性实现

手机系统
Android
登录方式
QQ互联登录
绑定事件
2019-01-02 00:01
绑定状态
成功
备注
如果需要修改绑定，请联系HR进行修改

代码：

CSS代码：
/* 公共部分 */
dl {
    line-height: 1.5;
    margin: 0; padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;    
}
dd {
    word-break: break-all;    
    text-align: right;
    margin-left: 0;
}
dd:empty::before {
    content: '-';    
    color: #999;
}
/* absolute实现 */
.dl1 dt {
    position: absolute;
}
.dl1 dd {
    margin-left: 5em;    
}
/* flex实现 */
.dl2 {
    display: flex;
    flex-wrap: wrap;
}
.dl2 dt {
    width: 5em;
}
.dl2 dd {
    width: calc(100% - 5em);
}
/* grid实现 */
.dl3 {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1em;
}
.dl3 dd{
    text-align: right;
}
/* float实现 */
.dl4 dt {
    width: 5em;
    float: left;    
}
.dl4 dd {
    overflow: hidden;    
}
/* 流体特性实现 */
.dl5 dd {
    margin: -1.5em 0 0 5em;    
}