在过去的几个小时里,我一直在搜索网络以找到解决这个问题的方法,但是没有找到,所以我来到这里。
我需要div
的宽度为100%
减去 left div
的宽度。
这样左边的div
宽度保持不变(390px),而另一个div
会根据分辨率自动调整大小。我已经找到了在两侧有固定宽度div
的解决方案,但是就是无法想出这个解决方法。
在过去的几个小时里,我一直在搜索网络以找到解决这个问题的方法,但是没有找到,所以我来到这里。
我需要div
的宽度为100%
减去 left div
的宽度。
这样左边的div
宽度保持不变(390px),而另一个div
会根据分辨率自动调整大小。我已经找到了在两侧有固定宽度div
的解决方案,但是就是无法想出这个解决方法。
简单的解决方案:
<div id="content">
<div class="padder">
</div><!-- .padder -->
</div>
<div id="sidebar">
<div class="padder">
</div><!-- .padder -->
</div>
CSS:
div#content {
float: right;
width: 100%;
}
div#content .padder {
margin-left: 330px;
padding: 0 30px 0 0;
}
div#sidebar {
float: left;
width: 300px;
margin-top: -30px;
padding-left: 30px;
margin-right: -330px;
}
这将允许您拥有固定的侧边栏宽度和全宽内容区域,我已经使用它很多次,它的效果非常好。
在CSS中,目前不支持这种类型的计算(至少在Chromium 12/Ubuntu 11.04中不支持),但是CSS3中定义了一个calc()
函数,可以使用简单的数学函数来实现这种行为:
section {
float: left;
margin: 1em; border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}
p {
margin: calc(1rem - 2px) calc(1rem - 1px);
border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }
(以上示例直接引用自W3.org。)
我的个人(不全面)测试显示:
+----------------+-------------------+
| Browser | Ubuntu 11.04 |
+----------------+-------------------+
| Chromium 12 | Fails |
| Firefox 5 | Fails |
| Opera 11.10 | Fails |
+----------------+-------------------+
calc()
演示获得的,以下是代码:
HTML:
<div id="box">This is the box.</div>
#box {
width: calc(100% - 20%);
background-color: #f90;
font-weight: bold;
color: #fff;
line-height: 2em;
text-align: center;
margin: auto;
}
如果有人想在他们的平台上运行上面的测试,并提供结果或将其编辑到此答案中,那将非常感激。
正如clairesuzy在评论中指出的:
看一下caniuse,如果你使用
width: -moz-calc()
,它确实可以在Firefox中工作,但仅限于此;)
事实上,在Firefox 5(Ubuntu 11.04)中它确实有效(其他供应商前缀似乎对Opera或Webkit没有任何作用,遗憾):修订后的供应商前缀演示。
参考:
<div id="left">...</div>
<div id="content">...<br> more content</div>
#left {float: left; width: 390px; background: #f76922;}
#content {overflow: hidden; background: #eee;}
也许这与问题不直接相关,但我曾经遇到过类似的问题,需要在列表中排列项目。每个项目的固定宽度都在右侧。我用以下方法解决了这个问题。思路是通过将正数的padding-left
与负数的margin-left
平衡,同时将宽度设置为100%
:
.item {
max-height: 40px;
}
.item-title {
display: inline-block;
height: 40px;
width: 100%;
margin-left: -70px;
padding-left: 65px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* This one should be fixed-width. */
.item-params {
width: 60px;
height: 40px;
float: right;
}