haizlin/fe-interview

[html] 第630天 实现两列等宽布局的方式有哪些?

Opened this issue · 4 comments

第630天 实现两列等宽布局的方式有哪些?

3+1官网

我也要出题

1.flex实现:
.parent {
display: flex;
}
.child {
flex: 1;
width: 50%;
}
2.float实现(但是要注意清除浮动):
.child {
float: left;
width: 50%;
}

.parent{ display:grid; grid-template-columns:repeat(2,50%); height:100px; }
GeJJ commented

1.绝对定位

.position-wrap{ height: 20px; position: relative; } .position-left{ position: absolute; left: 0; width: 50%; height: 100%; background: red; } .position-right{ position: absolute; left: 50%; width: 50%; height: 100%; background: royalblue; } 2.table
.table-wrap{ display: table; height: 20px; width: 100%; } .table-left{ height: 20px; background: red; display: table-cell; } .table-right{ height: 20px; background: royalblue; display: table-cell; }

.parent {
display: flex;
}
.child {
flex: 1;
}