3 行Parallel_html/css_WEB-ITnose

1 <div class="content">2     <div class="left"></div>3     <div class="center"></div>4     <div class="right"></div>5 </div> 

1 body{margin:0;padding:0;}2 .content div{3      width:100px;4      height:100px;5      background:rgb(147,172,213);6      margin:10px;7 }

方法 1: float

1 .content div{float:left;}

3 つの div は一緒に浮動します。浮動要素のマージンマージの問題はありません。中央の右マージンは両方とも20pxです。

方法 2: 絶対配置

1 .content {position:relative;}2 .content div{position:absolute;}3 div.center{top:0;left:110px;}4 div.right{top:0;left:220px;}  

親要素を相対配置に設定し、配置された子要素を絶対配置に設定すると、この時点で 3 つの要素が頂点に重なり合います。親要素を作成し、左右の余白が 10 ピクセルの上部と左側のレイアウトを使用します。

方法 3: inline-block

1.content div{display:inline-block;}

これをインラインブロック要素に変換しますが、div の間に余分なスペースがあり、互換性の問題がさらに多くなります。

方法 4: 負のマージン

1  div.center{2       margin-left:120px;/*100+10*2=120px 以下数值都以center左右margin为10px考虑*/3       margin-top:-110px;/*100+10=110px 要想用margin-top实现上移，则其值为负*/4 }5 div.right{6       margin-left:230px;/*100*2+10*3=230px*/7       margin-top:-110px;/*当center上去之后，原占位空间不存在，right上移，故再移动需要的高度与center一致为100+10=110px。而如果先写right，margin-top就应该上移（100+10）*2=220px*/8 }

ネットワーク速度が遅い場合や更新頻度が高い場合、負のマージンを使用すると明らかな動きが発生するため、この方法はお勧めできません。