Question

我现在有this situation - 两个div，其中第一个固定在左边，第二个是流体在右边。我需要切换两个div的HTML位置，但保持网页外观不变。

所以，

<div id="fixed"></div>
<div id="fluid"></div>

需要成为：

<div id="fluid"></div>
<div id="fixed"></div>

但是当显示网页时，流体div需要在右侧，固定在左侧。我无法弄清楚这一点。有没有办法做到这一点？

Answer 1

有多种方法可以做到这一点。最好将两个div放在容器中，即使设置为width: 100%。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.container {position: relative;}
#fixed
{
  width: 300px;
  height: 100px;
  background: #111;
  position: absolute;
  top: 0; left: 0;
}

#fluid
{
  height: 100px;
  background: #555;
  margin-left: 300px;
}

</style>
</head>
<body>
<div class="container">
    <div id="fluid"></div>
    <div id="fixed"></div>
</div>

</body>
</html>

现代的选择是使用flexbox，但它尚未得到可靠的支持。

Answer 2

将float: right添加到#fixed - div。

两个div并排，第一个是流体在右边，第二个是固定宽度在左边

2 个答案: