[DIV+CSSアプリケーション]display:inlineをクリアする;float:left;の用途

1519 ワード

まず、display:inline;float:left;正しい意味.display:inline;(インライン)CSS権威ガイドのテキストには、ブロックレベルの要素ではない可視要素がインライン要素であることが示されています.その表現の特性は「行レイアウト」形式であり、ここで「行レイアウト」とは、その表現形式が常に行で表示されることを意味する.例えば、インライン要素border-bottom:1 px solid 0000を設定します.は、行ごとに繰り返され、行の下に黒い細い線があることを示します.ブロックレベル要素の場合、表示される黒い線はブロックの下にのみ表示されます.もちろんこれはdisplay:inlineのように見えません.float:left;の違いはありますが、float:leftを理解した場合.の特性では、何が起こっているのかがわかります.float:left;(左フローティング)指定した要素を通常のドキュメントフローから逸脱させて生成される特別なレイアウトプロパティです.また、FLOATはブロックレベル要素に適用されなければならない.すなわち、フローティングはインラインラベルに適用されるべきではない.あるいは言い換えると、FLOATが適用されると、この要素はブロックレベル要素として指定される.では、わかりました.インライン(display:inline;)要素は幅を設定できません.インラインは行レイアウトに属し、その特性は1行でレイアウトするため、幅を設定できません.
以下の例は主にstyle=「dispaly:inline」の使い方を述べる.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
   <table border="1" width="600">
   <tr>
   <!--span:         div:      ,     div       。-->
   <!--css  display   inline、block               -->
   <!---  float:right inline    ,          -->
   <td width="300"><span > SPAN1 </span><span> SPAN2 </span> </td>
   <td width="300" align="center"><div style="display:inline">aaaaa</div>
   <div style="display:inline">bbbbb</div></td>
   </tr>
   </table>
 </BODY>
</HTML>