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

我目前得到了this situation - 两个div，第一个固定在左边，第二个固定在左边对。我需要切换两个div的HTML位置，但保持网页外观不变。并列两个div，第一个是右边的流体，第二个是左边的固定宽度

所以，

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

需求，成为：

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

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

来源

2014-01-05 Andrei Khramtsov

有多种方法可以做到这一点。最好将两个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，但它不是可靠支持。

来源

2014-01-05 09:01:26

太棒了。这工作得很好。这是一个链接到结果 - http://codepen.io/anon/pen/FHdsJ。谢谢！ –

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

来源

2014-01-05 08:53:17 DenisIsaychX

这不是OP想要的。该页面应保持在视觉上相同。 –

感谢您的快速响应，但这导致http://codepen.io/anon/pen/lEJwt，它看起来不像原始的http://codepen.io/anon/pen/ImEJv。 –

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

回答

相关问题