Question

我想要一个带有两个右对齐列的布局。所以，我创建了三个div（两列和一个包装器）：

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

我向右移left div，right div，并为所有三个div设置正确的宽度：

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

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

Without floating the div http://img690.imageshack.us/img690/5844/rightrightalign.png

..然后我将wrapper div向右浮动，如果需要，WebKit和Firefox都不显示水平滚动条：

Without the right align 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>

有没有办法在不丢失水平滚动条的情况下获得右对齐的双列布局？

Answer 1

您可以使用一行表格来完成。我只检查过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 with right：0，内容被钉在右边，当窗口很窄时，它只是从左边缘消失。哎呀。

Answer 2

你不想要花车。这就是你要找的东西：

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

Answer 3

Found an explanation of why this is happening：

我不相信没有使用javascript可以解决这个问题。浏览器相对于该页面的左上角呈现页面，因此位于该0,0点上方或左侧的任何内容实际上都在屏幕外。所有溢出都发生在底部和右边。对于任何块元素内部的内容都是一样的。因此，如果您有一个项目相对于页面的右侧，宽度超过100％。 0,0原点左侧的部分将只是屏幕外的

右对齐双列布局会丢失水平滚动条

3 个答案: