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

我想要一个具有两个右对齐列的布局。所以，我创建了三个申报单（两列和一个包装）：右对齐的双列布局会丢失水平滚动条

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

有没有办法让一个右对齐的双列布局，不会丢失水平滚动条？

来源

2010-02-08 dbr

这是*怪异*！我在Windows 7的本地FF上进行了测试。我删除了文档类型，并将“overflow：auto”添加到了主体中，但都无济于事。我正在删除我的答案，所以这个问题吸引了更多的关注。真的有兴趣这是为什么。 – 2010-02-08 01:04:13

您不希望为此使用浮点数。这里是你正在寻找的：

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

来源

2010-02-09 17:19:18 Julik

啊哈，这似乎很好地工作，谢谢！ – dbr 2010-02-09 18:37:57

你可以用一行表来做到这一点。我只检查了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

随着浮动：右，或位置是：绝对右：0，内容被钉在右边，并且当窗口很窄，它只是消失离左边缘。哎呀。

来源

2010-02-08 09:19:18 awhyte

虽然这是可能的，但不应对“非表格”页面布局使用表格格式。快照清楚地显示导航和内容窗格，divs是去这里的最佳途径。表格语法应严格用于表格。 – 08Hawkeye 2010-08-19 18:20:55

Found an explanation of why this is happening：

我不相信有解决这个办法不使用JavaScript。浏览器呈现相对于该页面的左上角的页面，因此位于该0,0点左上方的任何东西都实际上是在屏幕外。所有溢出发生在底部和右侧。这与任何块元素内的内容都是一样的。因此，如果您的项目相对于页面的右侧定位，宽度超过100％。 0,0原点左边的部分将被简单地置于屏幕外

来源

2010-02-09 16:17:48 dbr

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

回答

相关问题