gpt4 book ai didi

css - 使用 css 自动调整中心 div 的大小?

转载 作者:太空宇宙 更新时间:2023-11-04 15:20:44 25 4
gpt4 key购买 nike

在调整浏览器窗口/页面大小时,我很难让 3 个 div 自动调整大小。

我有两个固定大小的 div,我希望中心 div 自动调整大小以填充剩余空间,而不是在页面大小缩小时让第三个 div 换行。

我将在包裹三个 div 的 div 上设置一个 min-width 属性,以防止在中间 div 大约 65px 宽时包裹第三个 div。

这是否必须使用 javascript 来完成,因为我目前正在尝试使用 css 来实现这一点,但我没有运气。

javascript 或 css 表达式类似于 width = page.width - div1.width -div3.width 但我想尽可能避免使用 js。

感谢您的帮助!

迈克

您可以在附图中看到预期的行为。

1) 我想要什么2) 我目前在收缩方面遇到的问题

1)expected div behavior 2)current div behaviour

我调整了 div 的大小,并将内部的文本框设置为 100%,以便它随 div 调整大小。

然而,右侧的 div 可以是 267px(如下所示),也可以是 192px(离散的),我应该只在某些页面上用代码设置 margin-right 吗?或者有没有办法根据 div 右侧的大小使 margin-right 动态?

例如。HTML

<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="centre">
<div>
</div>

CSS

#wrapper
{height:84px;
background-image:url(../images/siteImages/header_back.png);
background-repeat: repeat-x;}

#left
{height:inherit;
width:512px;
background-image:url(../images/siteImages/logo.png);
background-repeat: no-repeat;
float:left;}

#centre
{width:auto;
margin-left:512px;
margin-right:267px;
height:inherit;}

#right
{padding-right:10px;
height:inherit;
float:right;
text-align:right;}

最佳答案

你可以有这样的东西:

<div id="a">...</div>
<div id="c">...</div>
<div id="b">...</div>

使用这个 CSS:

#a { width: 512px; float: left; }
#b { width: auto; margin-left: 512px; margin-right: 200px;}
#c { width: 200px; float: right; }

我相信这会满足您的需求。

关于css - 使用 css 自动调整中心 div 的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9593843/

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