BinaryDevelop
  1. ホーム
  2. html

[解決済み] float:leftが設定されているときにdivを最大幅に展開する

2022-05-14 18:14:12

質問

こんなのあるんですけど。 

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

の2つのフロートが必要です。コンテンツdivは、メニューのための100pxを除いて、画面全体を埋めるようにしたいのです。floatを使用しない場合、divはそのまま拡大されます。しかし、floatが設定されている場合、これをどのように設定するのでしょうか？もし私が次のようなものを使うなら 

style=width:100%

とすると、content divは親のサイズを取得します。親はbodyか別のdivで、これも試してみましたが、もちろんメニューの右には収まりませんので、以下のようになります。

どのように解決するには？

私があなたを正しく理解していることを願って、これを見てください。 http://jsfiddle.net/EAEKc/ 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します