Question

在左侧，我们有一个上下文相关的导航/信息栏。有时它的信息非常少，有时则会占据整个页面的高度。我在其他关于浮动等的帖子上看到了一些建议，但我尝试过的都没有。

.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
.groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}

侧边栏有两个div - 一个用于创建占据页面整个高度的背景图层，然后是带有实际内容的tablebox - 它可以根据需要使用不同的背景颜色。

<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>

然后我们有了右侧的主要内容...再次提出的想法是，桌面框会有不同的背景颜色，并且看起来漂浮在页面顶部。

<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>

现在，如果浏览器宽度太小，右手div会低于侧边栏。是否有空间。

解：问题是两组div的父级没有定义的大小。随着浏览器窗口的大小调整，孩子们被洗牌以适应新尺寸。通过定义具有固定宽度的父div并添加溢出：auto即使浏览器窗口为，也不会更改父级。

注意：这显然不是解决此问题的最佳方法 - 这意味着内容不会动态格式化自身。它现在有一个固定的宽度。就我而言，我别无选择。这是一个乐队援助解决方案，但如果您正处于设计阶段，请考虑用手机或老人用低分辨率屏幕和大文本查看您的页面。

要清楚那些容易混淆的人：

<div style="width:1053px;overflow:auto">
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
</div>

但是再次 - 如果你有选择就不要这样做！固定宽度不会使您的网站在某些设备上非常漂亮。

Answer 1

您是否搜索过StackOverflow？这看起来非常相同：

How to avoid wrapping in CSS float

Answer 2

<head>
    <style>
        body {
            padding:0;
            margin:0;
        }
        div {
            width:25%;
            height:25%;
        }
        div.left {
            background-color:red;
            float:left;
        }
        div.right {
            background-color:yellow;
            float:right;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

http://jsfiddle.net/8gNDU/2/

两个CSS列 - 当宽度缩小时，右手栏会移到左侧列的底部

2 个答案: