51工具盒子效果展示 {#效果展示}
原始效果 {#原始效果}
最终效果 {#最终效果}
原始代码 {#原始代码}
html 部分 {#html-部分}
|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | hljs html < div class = "container" > < div class = "left" > left </ div > < div class = "right" > right </ div > </ div > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |
css 部分 {#css-部分}
|------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | hljs css body { min-width : 630px ; margin : 0 ; } .left , .right { height : 100px ; } .left { width : 100px ; background-color : #ffb5bf ; } .right { background-color : #94e8ff ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |
实现方法 {#实现方法}
使用 flex {#使用-flex}
|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 | hljs css .container { display : flex; } .right { flex : 1 ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |
使用 grid {#使用-grid}
|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | hljs css .container { display : grid; grid-template-columns : 100px auto; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |
使用 table {#使用-table}
|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 | hljs css .container { display : table; width : 100% ; } .left , .right { display : table-cell; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |
使用 absolute {#使用-absolute}
|---------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 | hljs css .container { position : relative; } .left { position : absolute; } .right { margin-left : 100px ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |
使用 float {#使用-float}
- 第一种
- 第二种
- 第三种
|---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 | hljs css .container { overflow : hidden; } .left { float : left; } .right { margin-left : 100px ; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> </tbody> </table> </figure> ` |------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ``` 1 2 3 4 5 6 7 8 9 10 11 12 ``` | ````hljs css .container { overflow : hidden; } .left , .right { float : left; } .right { width : calc ( 100% - 100px ); } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> </tbody> </table> </figure> ` |---------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | ``` 1 2 3 4 5 6 7 8 9 10 11 ``` | ```hljs css .container { overflow : hidden; } .left { float : left; } .right { overflow : auto; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> </tbody> </table> </figure> ` ``` | ```` | |
