4

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

我有 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

原谅我的英语

4

5 回答 5

5

如果您需要纯 CSS 解决方案，请考虑更改 DOM

演示

首先，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;
}
于 2013-10-26T03:22:57.260 回答
4

不能那样工作 - 你需要将“正确”的 div 嵌套在“中心”的 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;
}

这是一个更新的小提琴。

于 2013-10-26T03:25:27.590 回答
2

添加这个单独的，因为另一个可能对将来的某人有用。这是我能想到的唯一 CSS 唯一解决方案，但有一个警告：您必须在两个 div 上使用基于百分比的宽度：

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

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

20% 应该接近您在较小 div 上的需要，并且您可以在必要时使用媒体查询来防止它在较大屏幕上过宽。

这是一个更新的小提琴。

于 2013-10-26T03:46:30.627 回答
2

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

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

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

演示

于 2013-10-26T04:32:19.317 回答
1

我能做的是自定义您的 css ：

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

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

于 2013-10-26T03:25:35.490 回答