小编Mik*_*ull的帖子

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

在调整浏览器窗口/页面大小时,我很难获得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)预期的div行为2)当前的div行为

我将div重新调整大小并将文本框设置为100%,以便使用div重新调整大小.

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

例如.HTML

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
  <div id="centre">        
  <div>
</div>
Run Code Online (Sandbox Code Playgroud)

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;}
Run Code Online (Sandbox Code Playgroud)

html css resize width word-wrap

2
推荐指数
1
解决办法
5121
查看次数

标签 统计

css ×1

html ×1

resize ×1

width ×1

word-wrap ×1