gpt4 book ai didi

css - 两个并排的 div,第一个在右侧是流动的,第二个是在左侧固定宽度

转载 作者:行者123 更新时间:2023-12-02 21:38:06 24 4
gpt4 key购买 nike

我目前有this situation - 两个 div,第一个固定在左侧,第二个在右侧流动。我需要切换两个 div 的 HTML 位置,但保持网页外观不变。

所以,

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

需要成为:

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

但是当网页显示时,需要fluid div在右边,fixed在左边。我无法弄清楚这一点。有办法做到这一点吗?

最佳答案

有多种方法可以做到这一点。最好将两个 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,但尚未得到可靠支持。

关于css - 两个并排的 div,第一个在右侧是流动的,第二个是在左侧固定宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20931725/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com