CSS如何填满整个宽度？

Question

CSS如何填满整个宽度？

4

我已经谷歌搜索过了，但仍然不知道该怎么做。

我有三个

元素。

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

我尝试实现的内容：

id为center的div自动填充宽度
id为right的div位于id为center的右侧，宽度为200px；

我已经尝试过的内容：

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

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

如何使id为“center”的div与其右侧的另一个div（id为“right”）一起占据整个宽度？ jsfiddle 请原谅我的英语。

- ilike

1

#center { width: 80%; } #right{ width: 20%; max-width: 200px;} 这样应该足够接近了。 - KBN

5个回答

4

那不是这样的 - 你需要将 '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;
}

这里是最新的JSFiddle示例。

- Shawn Erquhart

您的演示是我想达成的目标，但我需要不改变DOM的CSS解决方案。 - ilike

Alien先生的答案实际上是更好的DOM修改解决方案。我会看看能否提出一个仅使用CSS的解决方案。 - Shawn Erquhart

2

由于其他解决方案可能对未来的某些人有用，因此我将其单独添加。这是我能想到的唯一的纯CSS解决方案，但有一个注意事项：您必须在两个div上使用基于百分比的宽度：

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

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

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

这里是更新后的示例。

- Shawn Erquhart

谢谢，但不能使用百分比作为最佳答案。但还是谢谢。 - ilike

那么您的选择是1.锁定容器的宽度，或者2.使用Oki Erie Rinaldi的解决方案并采用绝对定位。 - Shawn Erquhart

2

我从这里学到了一个新的/有用的技巧。

下面的解决方案不会影响您在更改时的DOM。

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

DEMO

- Rajaprabhu Aravindasamy

请注意，calc在IE8及以下版本以及所有安卓设备上都不受支持。遗憾的是，IE8仍然相当普遍地被使用。 - Stephen

1

我能做的是定制你的CSS：

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

#center填充它和#right之间的所有空白空间。
但你必须注意#center在#right后面。

- Oki Erie Rinaldi

想要避免你被投票否决：绝对定位对于这个问题来说是一个不必要的妥协。请查看我的答案或者Mr Alien的答案。 - Shawn Erquhart

是的，你的脚本结果比我的更整洁。我的结果在 #right 的边缘仍然有一点空间。对此我很抱歉.. :D - Oki Erie Rinaldi

1

不是空间的问题，而是绝对定位的代价，这看起来对于这个问题来说并不必要。话虽如此，原帖作者无法更改DOM，所以终究可能成为一个选项。 - Shawn Erquhart

如果我在div id=center中有一段长文本，由于div id=center在div id=right后面，因此有些文本将不会显示出来。正如你所说，结果仍然在#right的边缘留有一点空间。所以我不能接受它作为正确答案。但是还是谢谢，这是一个不错的技巧。 - ilike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

如果您需要一个纯CSS解决方案，则考虑修改您的DOM

演示

首先，从#center中删除float: left;属性，然后我添加了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;
}