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

Posted 2023-03-06

【中文标题】使用css自动调整中心div的大小？

【英文标题】：Auto resizing centre div using css?

【发布时间】：2012-03-24 12:43:27

【问题描述】：

在调整浏览器窗口/页面大小时，我很难让 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）我目前正在经历的收缩

我将 div 重新调整大小并将其中的文本框设置为 100%，以便它与 div 一起调整大小。

但是，右侧的 div 可以是 267 像素（如下所示），也可以是 192 像素（离散），我是否应该在某些页面上使用代码后面的代码设置边距？或者有没有办法根据 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;

【问题讨论】：

dynamicdrive.com/style/layouts/item/…

【参考方案1】：

你可以有类似的东西：

<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; 

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

【讨论】：

我在 jsfiddle (jsfiddle.net/tFLSK/1) 上写了这个解决方案。你的速度更快。

谢谢 #b 也需要 margin-left:512px

【参考方案2】：

你试过了吗：

<div id="div2" style="margin-left:auto;margin-right:auto;">content</div>

删除您在 div2 上可能拥有的任何 min-width

【参考方案3】：

在你的 CSS 中试试这个

#centre overflow:hidden;

无需指定宽度&边距&高度； .它会自动调整。无需更改您的 HTML 顺序。