7

我正在尝试实现一个内容，我需要有一个浏览器宽度的 100% 的部分，在其中我需要在左边有一个 200px 宽度的 div，在右边我需要有一个动态宽度的 div取决于浏览器的宽度。示例 .. 浏览器 = 900px -> 左 div 200px 右 div 700px。并且这两个 div 都具有动态高度，具体取决于我在其中放入了多少信息 .. 包装器 div 将采用这 2 个 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 中做同样的事情:)

提前谢谢你，丹尼尔！

4

2 回答 2

15

你可以用 CSS 来做到这一点。诀窍是使用浮动（左侧 div）和非浮动 div（右侧）。左侧（浮动）div 也需要有一个最小高度，否则如果左侧没有任何内容，右侧（非浮动）div 将占用左侧列的空间。

编辑：该权利<div>还应具有以下规则：

overflow: hidden;
display: block;

使overflow: hidden右 div 表现为一列，否则其内容将围绕左 div 流动。

请注意，#wrapper不需要宽度，因为 a 的默认宽度<div>是 100%（因为您说它将占用浏览器窗口的整个宽度），并且还删除了它的边距。

这是一个示例（为了非 HTML5 浏览器，我将其更改<section>为<div>，但它的工作原理相同）。

我放置了背景颜色来区分所有元素。

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

​</p>

于 2012-08-01T19:04:49.393 回答
1

这是使用一点 jQuery 为您提供的解决方案，因为我认为您的问题没有纯 CSS 解决方案（但我可能错了）。

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

于 2012-08-01T18:06:31.050 回答