Question

我左边的div左边有一个百分比宽度，右边的div漂浮在左边，我想占用剩下的空间，这里是[小提琴]：https://jsfiddle.net/gfhfku8k/。谢谢，提前提供任何帮助。

HTML：

<div class="container">
  <div class="left">

  </div>
  <div class="right">

  </div>
</div>

CSS：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
.left {
  width: 30%;
  height: 100%;
  float: left;
  border: 1px solid #000;
  overflow: hidden;
}
.right {
  height: 100%;
  /* width: 30px; */
  overflow: hidden;
  float: left;
  border: 1px solid #f00;
}

Answer 1

假设将width: 70%放在正确的列上并不是您想要的，那么使用flex最容易实现这种布局。以下是它的工作原理：

请注意，我删除了列上的float属性，并将box-sizing: border-box添加到所有元素（*），以使其正常工作（尽管此演示不需要）。

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  /* flex */
  display: flex;
}
.left,
.right {
  border: 1px solid #000;
  overflow: hidden;
}
.left {
  background: pink;
  width: 30%;
}
.right {
  background: blue;
  /* flex */
  flex-grow: 1;
}

<div class="container">

  <div class="left">
  </div>

  <div class="right">
  </div>

</div>

Answer 2

你可以试试这个

.right {
  height: 100%;
  overflow: hidden;
  border: 1px solid #f00;
}

从.right类中删除float：left。

左div百分比宽度，右填充剩余空间

2 个答案: