神奇的事
其实有的方法（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>
*/
.use-float .left {
float: left;
width: 12%;
border: 2px solid salmon;
}
.use-float .right {
overflow: hidden;
border: 2px solid seagreen;
}
/**/
/**/
.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;
}
/**/
/**/
.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;
}
/**/
/**/
.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;
}
/**/
/**/
.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;
}
/**/
/**/
.use-to .le {
float: left;
width: 100px;
height: 25px;
border: 1px solid #000000;
}
.use-to .ri {
display: block;
height: 25px;
border: 1px solid #14B9FF;
}
/**/
/**/
.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;
}
/**/
-->
using float
using table
| left | right |