検索

ホームページ  >  に質問  >  本文

コードフロートが機能しない理由がわかりません

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>3. 左右固定アダプティブの 2 列レイアウト</title>

<style type="text/css">

.main {

height:600px;

background-color:skyblue;

margin-right:200px;

}

.right {

width:200px;

height:600px;

background-color:lightgreen;

float:right; /*右のフロートを設定しますブロック要素* /

}

</style>

</head>

<body>

< ;div>本文</div>

<div>右</div>

</body>

</html>


lilovelilove2464日前1600

全員に返信(3)返信します

  • 　

    　2018-03-27 11:13:47

    私は 2 階の意見に同意します

    右側に div のためのスペースを残しておきたいから margin-right:200px;

    を使用しますか?

    しかし、div のデフォルトの幅は 100% です

    したがって、 margin-right:200px; を設定した後でも、その後の div の幅は実際には 100% のままです

    なぜなら、パディング、マージン、幅、ボーダーを合計すると実際の幅になります。コンポーネントの幅または高さ

    返事
    0
  • lilove

    lilove2018-03-26 14:57:21

    <div>main</div>

    <div>right</div>

    を

    <div class="main">main</div> に変更してください。 class="right">right</div>

    コードをもう一度テストしてください~

    返事
    0
  • lilove

    lilove2018-03-26 14:52:30

    コードを飲み込みに行ったら、クラスが消えてしまいました

    返事
    0
  • キャンセル返事