两栏布局，左侧宽度固定，右侧宽度动态。

Question

两栏布局，左侧宽度固定，右侧宽度动态。

7

我正在尝试实现一个内容区域，其中需要有一个占据浏览器宽度100%的部分，在这个部分里，我需要在左侧放置一个宽度为200px的div，并且在其右侧我需要有一个动态宽度的div，它的宽度取决于浏览器的宽度。例如，当浏览器宽度为900px时，左侧div宽度为200px，右侧div宽度为700px。这两个div都具有动态高度，取决于我在它们中间放入多少信息。包裹它们的div将采用这两个div中最大的一个高度。到目前为止，我已经做了类似于以下的东西 html

<section id="wrapper">
  <div id="list">
  </div>
  <div id="grid">
  </div>
</section>

css

#wrapper {
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    overflow: hidden;
}

现在我需要对 #list 和 #grid div 进行 CSS 样式设置。希望有一种高效的解决方案，因为以后我还需要在 #grid div 中执行相同的操作 :)

提前感谢您，Daniel！

- Pacuraru Daniel

2个回答

1

这里有一个解决方案，使用一点jQuery，因为我认为没有纯CSS的解决方案可以解决你的问题（但我可能错了）。

http://fiddle.jshell.net/L32uj/

- Billy Moat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jackJoe · Accepted Answer

你可以使用CSS来实现。关键是使用浮动（左侧区域）和非浮动（右侧区域）的

。同时，左侧（浮动）

需要设置最小高度，否则如果左侧没有任何内容，则右侧（非浮动）

将占用左侧列的空间。

编辑：右侧的<div>也应具有以下规则：

overflow: hidden;
display: block;

overflow: hidden属性使右侧的

表现为一列，否则其内容会绕过左侧的

。请注意，#wrapper不需要设置宽度，因为

的默认宽度为100%（由于您说它将占据整个浏览器窗口的宽度），也请移除其边距。

这是一个示例（我将<section>更改为<div>，以适应非HTML5浏览器，但效果相同）。

我添加了背景颜色以区分所有元素。

http://jsfiddle.net/pmv3s/1/

这是全屏版本：http://fiddle.jshell.net/pmv3s/1/show/light/

CSS代码：

#wrapper {
    padding: 40px 0;
    overflow: hidden;
    background-color: red;
    min-height: 5px;
}
#list {
    float: left;
    width: 200px;
    background-color: green;
    overflow: hidden;
    min-height: 100px;
}
#grid {
    display: block;
    float: none;
    background-color: blue;  
    min-height: 100px;
    overflow: hidden;    
}