div容器填充宽度

Question

我有一个div容器名称＆＃34;内容＆＃34;。这个容器的宽度为500px;。 在这个div内是另外两个div。一个div称为＆＃34;右＆＃34;，固定宽度为300px;。另一个容器（＆＃34;左＆＃34;）应该填充其余的宽度。现在我可以给他200px的宽度，但是当我调整窗口大小时，宽度不会改变＆＃34; left＆＃34;容器。我只想要第二个容器的宽度＆＃34; left＆＃34;改变，可能是％宽度？

当我调整窗口大小时，它应该如下所示：

以下是代码：

＆＃13;

＆＃13;

*{
  margin: 0px;
  padding: 0px;
}

.content{
  width: 500px;
  border: 1px solid black;
  padding: 5px;
}

.left{
  float: left;
  width: 300px;
  height: 20px;
  background-color: blue;
}

.right{
  float: right;
  width: 50%;
  height: 20px;
  background-color: red;
}

.clearBoth{
  clear: both;
}

＆＃13;

<div class="content">
  <div class="left">
  
  </div>
  <div class="right">
  
  </div>
  <div class="clearBoth"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

JFiddle

Answer 1

您应该将左侧宽度更改为60％

.left{float: left;width: 60%;height: 20px;background-color: blue;}

.right{float: right; width: 40%;height: 20px; background-color: red;}

Answer 2

你想要这样的东西吗？您必须调整窗口大小才能看到更改。

我在CSS中使用calc()函数：

.right{
  float: left;
  width: calc(100% - 310px);
  height: 20px;
  margin-left: 10px;
  background-color: red;
}

我也使用主容器的流体宽度。

commonsware's blog

Answer 3

我想，这对你来说是最好的答案。请查看以下给出的代码段。

＆＃13;

＆＃13;

*{
  margin: 0px;
  padding: 0px;
}

.content{
  width: 100%;
  
}

.left{
  float: left;
  width: 300px;
  height: 100px;
  background-color: blue;
}

.right{
  float: right;
  width: calc(100% - 300px);width: -webkit-calc(100% - 300px);width: -moz-calc(100% - 300px);
  height: 100px;
  background-color: red;
}

.clearBoth{
  clear: both;
}

＆＃13;

<div class="content">
  <div class="left">
  
  </div>
  <div class="right">
  
  </div>
  <div class="clearBoth"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

http://jsfiddle.net/7XD8s/300/

.left {
  float: left;
  width: 300px;
  height: 20px;
  background-color: blue;
}

.right {
  display: block;
  margin-left: 300px;
  height: 20px;
  background-color: red;
}

Answer 5

不需要calc
http://jsfiddle.net/7XD8s/303/

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.content{
  border: 1px solid black;
  padding: 5px;
}

.left{
  float: left;
  width: 300px;
  height: 20px;
  margin-right: 10px;
  background-color: blue;
}

.right{
  overflow: hidden;
  height: 20px;
  background-color: red;
}

.clearBoth{
  clear: both;
}

Answer 6

以下代码会将右侧容器的宽度固定为300px。左侧容器将占据剩余空间，右侧为10px边距 请注意，内容容器的总宽度为500px。

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.content{
  border: 1px solid black;
  width: 500px;
  padding: 5px;
}

.left{
  float: left;
  width: calc(100% - 310px);
  height: 20px;
  margin-right: 10px;
  background-color: blue;
}

.right{
  float: right;
  margin: 0px;
  width: 300px;
  height: 20px;
  background-color: red;
}

.clearBoth{
  clear: both;
}