Question

我对CSS有一些具体问题。我试图找到一个解决方案，但我找不到这样的例子：

＆＃13;

.container {
  background: blue;
  height: 50px;
}

.nested {
  background: red;
  width: calc(100vh - 20px);
}

.primary {
  background: yellow;
  height: 50px;
  float: left;
}

.secondary {
  background: green;
  height: 100%;
  float: left;
}

＆＃13;

<div class="container">
  <div class="primary">
    <div class="nested">
      ffffff
    </div>
  </div>
  <div class="secondary">
    wwwwwww
  </div>
</div>

＆＃13;

我用一个简单的问题版本创建了一个小提琴： https://jsfiddle.net/7nwxfgg5/

我想扩展绿色div以填充所有可用的蓝色容器宽度，但我不知道如何做到这一点。

修改

删除 float：left 有助于宽度，但现在我注意到它不适用于高度，请检查此代码段：

＆＃13;

.container {
  background: blue;
}

.nested {
  background: red;
  height: 200px;
  width: calc(100vh - 20px);
}

.primary {
  background: yellow;
  height: 50px;
  float: left;
}

.secondary {
  background: green;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="primary">
    <div class="nested">
      ffffff
    </div>
  </div>
  <div class="secondary">
    wwwwwww
  </div>
</div>

＆＃13;

如何将绿色div调整为与红色相同的高度？

Answer 1

Flex非常适合布局。我觉得浮动比它的价值更麻烦所以我尽量避免它。它使构建响应式布局变得更加容易。这是了解更多信息的好资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  background: blue;
  height: 50px;
  display:flex;
}

.nested {
  background: red;
  width: 100%;
}

.primary {
  background: yellow;
  flex:0 0 50%;
}

.secondary {
  background: green;
  flex:0 0 50%;
}

<div class="container">

  <div class="primary">
    <div class="nested">
      ffffff
    </div><!-- nested -->
  </div><!-- primary -->
  
  <div class="secondary">
    wwwwwww
  </div><!-- secondary -->
  
</div><!-- container -->

CSS填充剩余的容器宽度

1 个答案: