Question

我有以下html页面：

<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>

css是这样的：

#div1{
  width: 160px;
  height: 160px;
  top: 0;
  left 0;
  position: absolute;
}

#div2{
  width: auto;
  height: 160px;
  top 0;
  left: 160px;
  position: absolute;
}

在调整窗口大小时，如何使div2拉伸以填充窗口的右侧部分。这意味着div1的宽度始终为 160px ，但div2的宽度将适合窗口的其余部分。如果auto中没有内容，则div2无效。

非常感谢！

Answer 1

将right:0添加到#div2个样式。

Answer 2

带有position: absolute的

元素位于文档流程之外，因此无法在width中“换行”。

使用float和margin：

#div1{
  width: 160px;
  height: 160px;
  float: left;
}

#div2{
  margin-left: 160px;
  height: 160px;
}

演示：http://jsfiddle.net/6nFDS/

Answer 3

好吧，我不太确定这是不是你想要的，但你可以使用width: 100%;：

width: 100%;

DEMO

Answer 4

您可以在此处找到CSS布局的完整教程： http://learnlayout.com/

您可以使用：

 display:inline-block

如何使元素适合填充窗口的右侧部分？

4 个答案: