css 三栏宽度,CSS实现三栏布局，左右宽度固定，中间宽度自适应

假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。

首先要写好整个页面的布局：

html * {            padding: 0;            margin: 0;        }

.layout {            margin-top: 20px;        }

.layout article div {            min-height: 100px;        }

123456789101112131415

1.浮动的解决方案

.layout.float .left {                float: left;                 300px;                background: red;            }

.layout.float .right {                float: right;                 300px;                background: blue;            }

.layout.float .center {                background: yellow;            }

浮动解决方案

1.这是布局的中间部分

2.这是布局的中间部分

123456789101112131415161718192021222324252627282930

2.绝对定位的解决方案

.layout.absolute .left-center-right>div {                position: absolute;            }

.layout.absolute .left {                left: 0;                 300px;                background: red;            }

.layout.absolute .center {                left: 300px;                right: 300px;                background: yellow;            }

.layout.absolute .right {                right: 0;                 300px;                background: blue;            }

绝对定位的解决方案

1.这是布局的中间部分

2.这是布局的中间部分

123456789101112131415161718192021222324252627282930313233343536

3.flexbox的解决方案

.layout.flexbox {                margin-top: 140px;            }

.layout.flexbox .left-center-right {                display: flex;            }

.layout.flexbox .left {                 300px;                background: red;            }

.layout.flexbox .center {                flex: 1;                background: yellow;            }

.layout.flexbox .right {                 300px;                background: blue;            }

flexbox的解决方案

1.这是布局的中间部分

2.这是布局的中间部分

12345678910111213141516171819202122232425262728293031323334353637

4.表格布局的解决方案

.layout.table .left-center-right {                 100%;                display: table;                height: 100px;            }

.layout.table .left-center-right>div {                display: table-cell;            }

.layout.table .left {                 300px;                background: red;            }

.layout.table .center {                background: yellow;            }

.layout.table .right {                 300px;                background: blue;            }

表格布局的解决方案

1.这是布局的中间部分

2.这是布局的中间部分

1234567891011121314151617181920212223242526272829303132333435363738

5.网格布局的解决方案

.layout.grid .left-center-right {                display: grid;                 100%;                grid-template-rows: 100px;                grid-template-columns: 300px auto 300px;            }

.layout.grid .left {                background: red;            }

.layout.grid .center {                background: yellow;            }

.layout.grid .right {                background: blue;            }

网格布局的解决方案

1.这是布局的中间部分

2.这是布局的中间部分

123456789101112131415161718192021222324252627282930313233

效果图：