HTML+CSS フローティングモデルを簡単に始める

形の要素が 1 行を占めているため、2 つのブロック形の要素を並べて表示したい場合はどうすればよいでしょうか。心配しないでください。要素を float に設定すると、この願いを達成できます。

デフォルトではどの要素もフローティングにすることはできませんが、CSSを使用してフローティングとして定義できます。div、p、table、imgなどの要素はフローティングとして定義できます

以下にフローティングの例を書いてみましょう。以下のように

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
    }

    #dv2{
      width:100px;
      height:100px;
      background:red;
    }
</style>
</head>
<body>
      <div id="dv1"></div>
      <div id="dv2"></div>
</body>
</html>

上記のコードは、ブロック要素 div が 1 行を占めており、それらを 1 行に配置してから、2 つの div の間に距離を追加する必要があります。次のコードを参照してください。これで、必要なエフェクトが完成しました。まず最初の div に対して左方向の float を作成し、2 番目の div にも左方向のフロートを作成する必要があります。そうすれば、2 つがリンクされて同じ行に表示されます

次に、 2 番目の div の左方向の境界線それだけです

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>流动模式下的内联元素</title> <style type="text/css"> #dv1{ width:100px; height:100px; background:green; float:left; } #dv2{ width:100px; height:100px; background:red; float:left; margin-left:5px; /*调节俩个div之间的距离*/ } </style> </head> <body> <div id="dv1"></div> <div id="dv2"></div> </body> </html>

提出するリセットコード

自動運転