我有一个DIV容器,里面放着几个内部DIV,它们全部悬空.内部DIV可以在某些事件上改变宽度,并且包含DIV相应地调整.我在容器中使用float:left来保持缩小到内部div的宽度.我在内部div中使用float:left,所以即使内容发生变化,布局也很干净.
问题是我希望DIV容器的宽度和高度保持不变,除非特定事件导致内部宽度发生变化.从概念上讲,我想在内部使用float来获得布局优势,但后来我想"修复"它们以便它们不会浮动.因此,如果容器宽度为700px,我希望即使用户缩小浏览器窗口也能保持这种状态.我想要容器,它的内部DIV只能被浏览器窗口剪切掉.
我觉得这可以在CSS中很好地完成,我只是无法弄清楚如何.如果有必要,我不反对添加另一个容器......
由于唯一需要的布局更改是基于事件的,我也愿意使用一些JS.但这有必要吗？(而且我还不确定我知道要修改什么:容器尺寸？内浮力？其他？)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#canvas {
overflow:auto; /* for clearing floats */
}
#container {
float:left; /* so container shrinks around contained divs */
border:thin solid blue;
}
.inner {
float:left; /* so inner elems line up nicely w/o saying fixed coords */
padding-top:8px;
padding-bottom:4px;
padding-left:80px;
padding-right:80px;
}
#inner1 {
background-color:#ffdddd;
}
#inner2 {
background-color:#ddffdd;
}
#inner3 {
background-color:#ddddff;
}
</style>
</head>
<body>
<div id="canvas">
<div id="container">
<div …css ×1