Question

我已经护目镜但仍然不知道该怎么做

我有3个div

<body>
    <div id="container">
        <div id="center"> <h1>center</h1> </div>
        <div id="right"> <h1>right</h1> </div>
    </div>
</body>

我试图完成的事情

div id = center是自动填充宽度
div id = right位于div id = center，width = 200px;

到目前为止我尝试了什么

#center{
    background-color: green;
        float: left;
        overflow: auto;
}

#right{
    background-color: red;
        float: right;
        width: 200px;
}

如何使div id = center在另一个div（div id = right）的正确位置填充整个宽度

jsfiddle

原谅我的英语

Answer 1

如果你需要一个纯CSS解决方案，那么考虑改变你的DOM

Demo

首先，从float: left;删除#center属性，然后我添加width: auto;和overflow: hidden;属性，这将使列独立。

参考代码：

<div id="container">
    <div id="right"></div>
    <div id="center"></div>
</div>

#container {
    height: auto;
    overflow: hidden;
}

#center {
    background-color: green;
    width: auto;
    height: 20px;
    overflow: hidden;
}

#right {
    background-color: red;
    float: right;
    height: 20px;
    width: 200px;
}

Answer 2

不能那样工作 - 你需要将'right'div嵌套在'center'div中：

<body>
  <div id="container">
    <div id="center">
      <h1>center</h1> 
      <div id="right">
        <h1>right</h1> 
      </div>
    </div>
  </div>
</body>

然后将h1显示为内联：

h1 {
  display: inline-block;
}
#center {
  background-color: green;
  float: left;
  width: 100%;
}
#right {
  background-color: red;
  float: right;
  width: 200px;
}

Here's an updated fiddle.

Answer 3

将此单独添加，因为另一个可能对将来的某个人有用。这是我能提出的唯一的CSS解决方案，但有一点需要注意：你必须在两个div上使用基于百分比的宽度：

#center {
  background-color: green;
  display: inline-block;
  float: left;
  width: 80%;
}

#right {
  background-color: red;
  float: left;
  width: 20%;
}

20％应该接近您在较小的div上所需的内容，并且如果需要可以使用媒体查询以防止它在较大的屏幕上过宽。

Here's an updated fiddle.

Answer 4

我从here得到了这个并且学到了一个新的/有用的。

以下解决方案不会影响您进行更改的dom。

#center{
    background-color: green;
    float: left;
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
}

DEMO

Answer 5

我该怎么做才能自定义你的css：

#center{
    background-color: green;
    position : absolute;
    width : 100%;
    z-index : -1;
}

#center填充它与#right之间的所有空白区域。
但你必须注意到#center在#right

之后

CSS如何填充整个宽度？

5 个答案: