当前位置: 首页 > 面试题库 >

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

米子轩
2023-03-14
问题内容

我有这样的事情:

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

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

style=width:100%

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


问题答案:

希望我正确理解了您,看看这个:

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


 类似资料:
  • 是否有可能将Nifi中的入站TCP连接数量扩展到数万个?使用TCP连接扩展NIFI:文档状态最大设置为2。 我们预计将处理10-25,000个长时间运行的TCP连接(最大连接持续时间为4小时)。部署多个冗余的NIFI集群来处理负载不成问题。

  • 大家好。我试图在网格上实现一个标题,它在较小的屏幕上动态地将列移动到下一行。我使用以下字符串构建它: Grid-Template-Columns:repeat(auto-fit,minmax(max-content,230px)); 它有点起作用,但在某些分辨率下,列不会向右扩展到全宽,因此另一个背景(从[body])从下面可见。如果没有mediaquery或calc(如果没有其他方法,我会尝试那

  • 问题内容: 收缩将div包装到某些文本非常简单。但是,如果由于最大宽度(例如)而使文本换行到第二行(或更多行),则DIV的大小不会缩小为新换行的文本。它仍会扩展到断点(在这种情况下为最大宽度值),从而在DIV的右侧产生大量的边距。当要使该DIV居中以使包装的文本居中时,这是有问题的。不会因为DIV不会缩小到换行的多行文本。一种解决方案是使用对齐的文本,但这并不总是可行的,结果可能令人生畏,单词之间

  • 问题内容: 我希望轮播DIV(s7)扩展到整个屏幕的高度。我不知道为什么它不成功。 问题答案: 为了使百分比值适合身高,必须确定父母的身高。唯一的例外是 root 元素,它可以是百分比高度。。 因此,您已将除之外的所有元素赋予了高度,因此您应该添加以下内容: 而且您的代码应该可以正常工作。

  • 我用的是木星笔记本。我有一个相当宽的屏幕,但是显示的输出(例如,当我打印一个数组时)被格式化,就像屏幕很窄一样。 我找到了一种增加细胞宽度的方法 但这似乎只影响输入,而不影响输出(参见屏幕截图): 我已尝试在

  • 我觉得我需要稍微重新表述一下这个问题。 更新问题如下。 我有一个包含: 它包含以下三个面板: 具有固定大小“x”和“y”的J面板 没有固定大小的JPanel 没有固定尺寸和小高度的J面板 第二个JGroup包含一个JTable,因此它会扩展以填充整个高度,并按预期将底部面板一直向下推。 像这样: t=顶部面板,m=中间面板,b=底部面板。 这很有效。但底部面板感觉不到填充整个父对象的宽度,这是一个