设置float：left时将div扩展到最大宽度

小编典典

设置float：left时将div扩展到最大宽度

html

我有这样的事情：

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

两个花车都是必需的。我希望内容div填充整个屏幕减去菜单的那些100px。如果我不使用浮点数，div会完全按照它的比例扩展。但是当设置了float时如何设置呢？如果我用……

style=width:100%

然后内容div会获取父级的大小，它是正文或我也尝试过的另一个div，因此，它当然不适合菜单右侧，然后显示在下面。

阅读 646

2020-05-10

共1个答案

小编典典

希望我正确理解了您，看看这个：

<!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>

2020-05-10