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

[haizhilin2013]

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

3+1官网

我也要出题

[GeassAthena]

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

[liurubin]

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

[GeJJ]

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

[wu529778790]

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