右对齐的双列布局丢失了水平滚动条。

Question

右对齐的双列布局丢失了水平滚动条。

4

我需要一个包含两个右对齐列的布局。因此，我创建了三个div（两个列和一个包装器）：

<div id="wrapper">
    <div id="left">
        First column
    </div>
    <div id="right">
        Second column
    </div>
</div>

我将左边的 div 设置为浮动向左，右边的 div 设置为浮动向右，并为这三个 div 设置了正确的宽度：

#wrapper{
    width:30em;
}
#left{
    float:left;
    width:10em;
}
#right{
    float:right;
    width:20em;
}

这一切看起来都符合预期...

没有将div浮动，如下所示：http://img690.imageshack.us/img690/5844/rightrightalign.png

...但是当我将wrapper div浮动到右侧时，无论是WebKit还是Firefox在需要显示水平滚动条时都不会显示：

没有右对齐，如下所示：http://img690.imageshack.us/img690/8559/withoutrightalign.png

如果我使用position: absolute; right:0，情况也是同样的。

完整的HTML文档示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
    <style type="text/css" media="screen">
        #wrapper{
            width:30em;
            float:right; /* The problem line */}
        #left{
            float:left;
            width:10em;
            background: green;}
        #right{
            float:right;
            width:20em;
            background: red;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>
</body>
</html>

有没有一种方法可以得到一个右对齐的双列布局，同时不失去水平滚动条？

- dbr

这很奇怪！我在Windows 7上的FF本地测试过了。我删除了doctype并将overflow：auto添加到body中，但都没有用。我要删除我的答案，以便问题能够引起更多关注。真的很想知道为什么会这样。 - Pekka

3个回答

1

你不需要使用浮点数。这是你要找的：

   #wrapper{
    width:30em;
    margin-right: 2px;
    margin-left: auto;
   }
   #left{
    float:left;
    width:10em;
    background: green;
   }
   #right{
    float:right;
    width:20em;
    background: red;
   }

- Julik

0

发现了这种情况的解释：

我认为没有办法避免这个问题，除非使用JavaScript。浏览器相对于页面的左上角来呈现页面，所以任何位于该0,0点以上或左侧的位置实际上都是屏幕外的。所有溢出都发生在底部和右侧。任何块元素内部的内容也是如此。因此，如果您有一个相对于页面右侧定位的项目，宽度超过100％。该原点0,0左侧的部分将简单地在屏幕外。

- dbr

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

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

- awhyte · Accepted Answer

您可以使用一行表格完成它。我只在Chrome上进行了检查，但我认为它可以在任何地方工作。诀窍是给最左边的“空”单元格一个100％的宽度，以将其余部分向右压缩。表格本身钉在左侧边缘，而不是右侧边缘，因此当窗口变窄时，内容被推向右侧，您会得到滚动条。

stuff before the columns
<table style="width:100%" border=1><tr>
<td style="width:100%">(empty)
<td valign=top><div style="width:10em">left</div>
<td valign=top><div style="width:20em">right right right right right right right right right right right right right right right </div>
</table>
stuff after the columns

使用float:right或position:absolute和right:0，内容将被固定在右侧，当窗口变窄时，它会消失在左边缘。真烦人。