1

在此处输入图像描述我有一个有趣的布局设计问题，我想知道是否可以得到一些帮助。

有两个彼此相邻的容器，在大多数情况下，右侧的一个是静态大小的。左边的应该根据动态加载的内容增长。它可能有很多，或者只有一个数据集。现在，随着它的增长，右边的容器应该总是在左边的旁边。

棘手的部分来了。左边的容器不能换行，应该占据屏幕上的剩余宽度，此时会出现滚动条。此时，右侧容器靠近屏幕边缘。

我可以让它在左侧容器总是占用剩余屏幕空间的地方工作，但这会将右侧容器一直推到右侧，即使左侧只有一点点数据。

我还可以让数据增长并使右侧保持在左侧旁边，但是溢出滚动条永远不会出现。对于如何解决所有这些要求，我束手无策。

我也可以只为所有内容设置宽度，但这并不能真正解决增长到屏幕分辨率的要求，也不能只解决少量数据

编辑：附上我当前布局的图像。这看起来不错，因为它是“完整的”，占据了浏览器宽度的 100%。如果数据列变得太小以至于不再滚动，我需要让右侧部分向左移动。

4

2 回答 2

1

我把我认为你想要完成的事情放在一起。

  1. 右侧列的宽度和位置是固定的。
  2. 左栏将扩大宽度，如果宽度太小而无法显示内部内容，则滚动。

这是示例：http: //jsfiddle.net/MwdED/

这是HTML：

<div class="container">
    <div class="col-left">
        <div class="col-content">
            <div class="wide-content">
                THis is some wide content, sitting inside of the left column.
            </div>
        </div>
    </div>
    <div class="col-right">
        <div class="col-content">
            This is the right column.  It's fixed in width.
        </div>
    </div>
</div>

和 CSS

.container {
    position: relative;
    min-width: 500px; /*make sure the columns don't collapse on top of each other*/
}

.col-left {
    padding-right: 200px; /*make room for right column*/
}

.col-left .col-content {
    min-width: 300px; /* the minimum width, before overflow scrolling occurs */   
    overflow: auto;
}

.col-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}

.wide-content {
    background: red;
    width: 1000px;
}
于 2013-01-22T21:12:02.940 回答
0

拿 Axel 提供的东西来说，我认为这样的事情肯定会奏效。目的是让两个容器都流动起来，这样无论哪个容器变大或缩小，另一个容器都会吸收差异，但由于某种原因，容器会相互渗入。

.col-left .col-content {
    min-width: 20%; /* the minimum width, before overflow scrolling occurs */ 
    max-width: 80%;
    overflow: scroll;
}

.col-right {
   position: absolute;
   right: 0;
   top: 0;
   min-width: 20%;
   max-width: 80%;
}
于 2013-01-23T14:09:40.457 回答