Question

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div style="float:left;border:5px solid red">
aadsas
</div>
<div style="float:left;border:5px solid green">
zzzzzzzzzzzz<br/>
asdasdasdas
</div>
<div style="clear:both;border:5px solid blue">asasdasdas</div>
  </body>

</html>

我试图让第二个div（zzzzzzzzzzzz）向左浮动以占据第一个左浮动div之后的所有剩余宽度。并且在不指定第二个或第一个div的像素宽度的情况下实现此目的

http://plnkr.co/edit/McbnZTPDaTEmcPM4bEsJ?p=preview

Answer 1

此解决方案使用flex。它将使所有div在相同的高度和宽度范围内根据需要。

body{
  margin:0;
  padding: 0;
}

.flex.parent{
  display: flex;
  flex-wrap: wrap;
}

div{
  min-height: 30px;
  flex: 0 1 auto;
  margin: .5em;
}

.flex.parent>.fill{
  flex: 1 1 auto;
}

.flex.parent>.full{
  width: 100%;
  flex: 1 0 auto;
}

<div class="flex parent">
  <div style="background:red">zzzz</div>
  <div style="background:blue" class="fill">aa</div>
  <div style="background:green" class="full"></div>
</div>

Answer 2

您有多种选择。在下面的解决方案中，我不会考虑边框宽度，我假设它只是为了标记div。

从绿色中删除浮动，在绿色中插入红色，并在隐藏多余的padding-bottom时分别margin-bottom和100% -100% overflow: hidden在绿色）。请注意，即使绿色有oveflow:hidden，它实际上也会变成全高红色，因为红色是浮动的。

＆＃13;

<div style="border:5px solid green; position: relative; overflow: hidden;">
  <div style="float:left;border:5px solid red;padding-bottom: 100%; margin-bottom:-100%;">
    aadsas
  </div>
  zzzzzzzzzzzz
  <br/>asdasdasdas
</div>
<div style="clear:both;border:5px solid blue">asasdasdas</div>

＆＃13;

如果红色已固定，请从绿色中移除浮动，并将其margin-left等于红色的宽度。问题解决了。不要忘记从绿色中移除漂浮物。

＆＃13;

<div style="float:left;border:5px solid red;width: 100px;">
  aadsas
</div>
<div style="margin-left: 105px; border:5px solid green;">
  zzzzzzzzzzzz
  <br/>asdasdasdas
</div>
<div style="clear:both;border:5px solid blue">asasdasdas</div>

＆＃13;

这实际上是＆＃34;正确＆＃34;并且是布局的未来。不幸的是，截至目前它还没有100％的浏览器支持。但它已经非常接近了。我说用它。它就在这里。它是＆＃34; Flexbox模型＆＃34;：从两者中移除浮动，将它们包裹在display: flex; flex-wrap: wrap;中并将它们flex-grow的0提供给红色和1到绿色。（不要成长和成长）。

＆＃13;

<div style="display: flex; flex-wrap: wrap;">
  <div style="border:5px solid red;flex-grow: 0;">
    aadsas
  </div>
  <div style="border:5px solid green; flex-grow: 1;">
    zzzzzzzzzzzz
    <br/>asdasdasdas
  </div>
</div>

<div style="clear:both;border:5px solid blue">asasdasdas</div>

＆＃13;

还有第四种方法，使用display: table和display: table-cell;它称为CSS表格布局方法，也称为布局anti-hero。

你基本上是从div构建一个旧的时间表，可以自由地将它们显示为某些狭窄布局上的堆栈，其中旧时表具有响应性缺陷。 CSS表仍然可以完成这项工作，并且仍然广泛支持布局，但据报道某些版本的Chrome不会自动使所有单元格的高度相同。 CSS表的唯一问题是在用于布局时它在语义上是错误的。

有消息称，Google正朝着遥远的未来迈进，代码应该是有意义的。那是什么意思？好吧，例如，它可能意味着浏览器可能达到这样的程度，如果你告诉他们＆＃34;这是一个表＆＃34; （这是你宣布display: table时所做的），它们会自动为你提供分页选项，按列排序，显示总数，可能转换固件和其他你可能想要在真实表中使用真实数据做的疯狂事情。因此，作为一名程序员，你可能会想要使用布局和表格元素的布局元素......好吧，表格数据，对吗？

Answer 3

您可以在表格中显示它：

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>

    <body>
        <div style="display:table; width:100%;">
            <div style="display: table-cell; float: left; border:5px solid red">
                aadsas
            </div>

            <div style="display: table-cell; width: 100%; border:5px solid green">
                zzzzzzzzzzzz<br/>
                asdasdasdas
            </div>
        </div>
        <div style="clear:both;border:5px solid blue">asasdasdas</div>
    </body>
</html>

如果删除“float：left”，您将获得更好的结果。

Answer 4

<!DOCTYPE html>
<html>

  <head>

    <style type="text/css">
       div.box {
         position:relative;
         float:left;
         height:100px;
       }
       #boxOne {
         border:5px solid red;
         width:29.5%;
       }
       #boxTwo {
         border:5px solid green;
         width:69%;
       }
       #boxThree {
         border:5px solid blue;
         width:99.5%;
       }
    </style>
  </head>

  <body>
    <div class="box" id="boxOne">
      aadsas
    </div>
    <div class="box" id="boxTwo">
      zzzzzzzzzzzz <br />
      asdasdasdas
    </div>
    <div class="box" id="boxThree">
      asasdasdas
    </div>
  </body>

</html>

如何获得第二个浮动div占用所有剩余宽度

4 个答案: