CSS：两栏布局【表单】的四种方式：float/position/flex/grid

两栏布局：一般是左边一栏宽度固定，右边一栏宽度自适应。

本文要实现的布局效果是，表单提交时，左边label定宽，右边表单元素或文字宽度自适应。

若要实现左边是头像，右边是留言信息的布局，可自行尝试。

浏览器效果：

html代码片段：

    
姓名
    
三三两两


    
年龄
    
永远18

方式一：浮动float

/*css*/
.box {
    margin-bottom: 10px;
}
.box:before,
.box:after {
    content: '';
    display: table;
}
.box:after {
    clear: both;
}
.left {
    float: left;
    width: 100px;
    padding-right: 12px;
    box-sizing: border-box;
    text-align: right;
    font-weight: 600;
}
.right {
    margin-left: 100px;
}

浮动方式无非是：

左边的元素：左浮动+定宽。

右边的元素：margin-left: 定宽。

再加一些细节，

• 比如给box清浮动（常规操作）
• 左边元素加padding-right的同时，设置box-sizing: border-box

方式二：定位position

/*css*/
.box {
    position: relative;
    margin-bottom: 10px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    padding-right: 12px;
    box-sizing: border-box;
    text-align: right;
    font-weight: 600;
}
.right {
    margin-left: 100px;
}

定位方式无非是：

壳子box：是已定位元素，即position: static | relative | absolute | fixed | sticky都可。

                 最简便的就是设置position：relative;

左边的元素：绝对定位absolute， 定宽。

右边的元素：margin-left: 定宽。

方式三：flex

/*css*/
.box {
    display: flex;
    margin-bottom: 10px;
}
.left {
    width: 100px;
    /*flex: 0 0 100px;*/
    padding-right: 12px;
    box-sizing: border-box;
    text-align: right;
    font-weight: 600;
}
.right {
    flex: 1;
}

flex方式无非是：

壳子box：display: flex;

左边的元素：定宽，两种方式：1) width: 100px;  2）flex: 0 0 100px;。

注意点：

• 不建议同时使用width 和 flex-basis。因同时使用，width会失效。
• 使用flex-basis时，谨慎使用max-width和min-width。
  因max-width和min-width会严格限制flex-basis，具体如下图。
• 

右边的元素：flex: 1;

Web端如果要兼容IE浏览器，谨慎使用。

方式四：grid

/*css*/
.box {
    display: grid;
    grid-template-columns: 100px auto;
    margin-bottom: 10px;
}
.left {
    padding-right: 12px;
    box-sizing: border-box;
    text-align: right;
    font-weight: 600;
}
.right {
}

grid方式无非是：

壳子box：display: grid; grid-template-columns: 定宽 auto;

不能更简单的写法，使用时要考虑浏览器的兼容性。

The End