Css 两个div并排，第一个是右侧的流体，第二个是左侧的固定宽度_Css_Fluid Layout

Css 两个div并排，第一个是右侧的流体，第二个是左侧的固定宽度

css

Css 两个div并排，第一个是右侧的流体，第二个是左侧的固定宽度,css,fluid-layout,Css,Fluid Layout,我现在有两个div，第一个固定在左边，第二个是流体在右边。我需要切换两个div的HTML位置，但保持网页外观不变所以需要成为： <div id="fluid"></div> <div id="fixed"></div> 但当显示网页时，流体div需要位于右侧，固定在左侧。我想不出来。有什么方法可以做到这一点吗？将浮动：右添加到#fixed-div.有多种方法可以做到这一点。最好将两个div都放在一个容器中，即使设置为width:100

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

所以

需要成为：

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

但当显示网页时，流体div需要位于右侧，固定在左侧。我想不出来。有什么方法可以做到这一点吗？

将

浮动：右添加到#fixed
-div.
有多种方法可以做到这一点。最好将两个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>


.container{位置：相对；}
#固定的
{
宽度：300px；
高度：100px；
背景：#111；
位置：绝对位置；
顶部：0；左侧：0；
}
#流质
{
高度：100px；
背景:#555；
左边距：300px；
}

现代的选择是使用flexbox，但它还没有得到可靠的支持。这不是OP想要的。页面在视觉上应该保持不变。感谢您的快速响应，但这会导致出现与原始页面不同的结果。太棒了。这很有效。这里有一个指向结果的链接-。谢谢
<!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>