神奇的事
其实有的方法（float、position、margin、flex）是有border像素的差
代码如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>神奇的事</title> <style>
section { margin: 50px 0; } h3 { color: red; text-align: center; /*padding: 10px;*/ background: yellowgreen; } /*<!--------------NO.1做法(使用float)---------------->*/ .use-float .left { float: left; width: 12%; border: 2px solid salmon; } .use-float .right { overflow: hidden; border: 2px solid seagreen; } /*<!----------------------------------------->*/ /*<!--------------NO.2做法(使用table)---------------->*/ .use-table{ border-collapse:collapse;/*合并表格*/ width:100%; height: 25px; border: 1px solid seagreen; } .use-table>tbody>tr>td:first-child{ width:100px; height: 25px; border: 1px solid sandybrown; } /*<!----------------------------------------->*/ /*<!--------------NO.3做法(使用flex)---------------->*/ .use-flex { display: flex; height: 25px; } .use-flex .flex-left { flex:none; width:100px; border: 1px solid saddlebrown; } .use-flex .flex-right { flex: 1; border: 1px solid slateblue; } /*<!----------------------------------------->*/ /*<!--------------NO.4做法(使用margin)---------------->*/ .use-margin .tleft { float: left; width: 100px; height: 25px; border: 1px solid slategray; } .use-margin .tright { margin-left: 100px; height: 25px; border: 1px solid saddlebrown; } /*<!----------------------------------------->*/ /*<!--------------NO.5做法(使用padding)---------------->*/ .use-padding .l { float: left; width: 100px; height: 25px; border: 1px solid sandybrown; } .use-padding .r { padding-left: 100px; height: 25px; border: 1px solid slateblue; } /*<!----------------------------------------->*/ /*<!--------------NO.6做法(使用padding)---------------->*/ .use-to .le { float: left; width: 100px; height: 25px; border: 1px solid #000000; } .use-to .ri { display: block; height: 25px; border: 1px solid #14B9FF; } /*<!----------------------------------------->*/ /*<!--------------NO.7做法(使用position)---------------->*/ .use-position{ position: relative; } .use-position .lef { position: absolute; top: 0; left: 0; width: 100px; height: 25px; border: 1px solid #dca7a7; /*background: red;*/ } .use-position .rig { position: absolute; top: 0; left: 100px; right: 0; height: 25px; border: 1px solid #64448f; } /*<!----------------------------------------->*/ </style></head><body> <section> <h3>using float</h3> <!--<hr style="margin: 30px 0">--> <div class="use-float"> <div class="left">left</div> <div class="right">right</div> </div> </section> <section> <h3>using table</h3> <!--<hr style="margin: 30px 0">--> <table class="use-table"> <tr> <td>left</td> <td>right</td> </tr> </table> </section> <section> <h3>using flex</h3> <!--<hr style="margin: 30px 0">--> <div class="use-flex"> <div class="flex-left">left</div> <div class="flex-right">right</div> </div> </section> <section> <h3>using margin</h3> <!--<hr style="margin: 20px 0">--> <div class="use-margin"> <div class="tleft">left</div> <div class="tright">right</div> </div> </section> <section> <h3>using padding</h3> <!--<hr style="margin: 20px 0">--> <div class="use-padding"> <div class="l">left</div> <div class="r">right</div> </div> </section> <section> <h3>using disblok</h3> <!--<hr style="margin: 20px 0">--> <div class="use-to"> <div class="le">left</div> <div class="ri">right</div> </div> </section> <section> <h3>using position</h3> <!--<hr style="margin: 30px 0">--> <div class="use-position"> <div class="lef">left</div> <div class="rig">right</div> </div> <!--<hr style="margin: 30px 0">--> </section> </div></div></body></html>
using float
left
right
using table
| left | right |
using flex
left
right
using margin
left
right
using padding
left
right
using disblok
left
right
using position
left
right
来源：https://www.cnblogs.com/xinxinmifan/p/5338660.html