Question

我有正确的div，动态高度和30％宽度。目标是让紫色元素在右边的div上浮动，并在结束后占用剩余的空间。是否可以仅使用CSS执行此操作？

＆＃13;

    .container {
      height: 500px;
      width:100%;
    }
    
    .yellow {
      width: 30%;
      background: yellow;
      float: right;
      margin: 5px;
    }
    
    .purple {
      background:purple;
      height: 40px;
      margin: 5px;
      width:100%;
      float:left;
    }

＆＃13;

<html>
    <div class="container">
      <div class="yellow"> some content here <br/><br/><br/> some content here  </div>
    
       <div class="purple"> </div>
      <div class="purple"> </div>
      <div class="purple"> </div>
      <div class="purple"> </div>
    </div>
    </html>

＆＃13;

Answer 1

如果您避免浮动紫色框，并使用overflow: hidden进行block formatting contexts，那么您将获得所需的结果。

基本上浮动元素会导致它们相互清除，因为您在紫色框上将宽度设置为100％。如果您将紫色框保留在文档的正常流程中，并使用块格式化上下文让它们根据右浮动元素进行重新整形，您将获得结果。

    .container {
      height: 500px;
      width:100%;
    }

    .yellow {
      width: 30%;
      background: lavender;
      float: right;
      margin: 5px;
    }

    .purple {
      background: lightblue;
      height: 40px;
      margin: 5px;
      overflow:hidden;
    }

<div class="container">
  <div class="yellow"> some content here <br/><br/><br/> some content here  </div>

   <div class="purple"> </div>
  <div class="purple"> </div>
  <div class="purple"> </div>
  <div class="purple"> </div>
</div>

一些额外的阅读：https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

在另一个div上浮动之后拉伸div

1 个答案: