Css 右对齐双栏布局丢失水平滚动条_Css

Css 右对齐双栏布局丢失水平滚动条

css

Css 右对齐双栏布局丢失水平滚动条,css,Css,我想要一个有两列右对齐的布局。因此，我创建了三个div（两列和一个包装）：这一切看起来和预期的一样 …但是我将包装器div浮动到右侧，如果需要，WebKit和Firefox都不会显示水平滚动条：如果我使用position:absolute，也会发生同样的情况；右：0 HTML文档的完整示例： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> &l

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

这一切看起来和预期的一样

…但是我将

包装器

div浮动到右侧，如果需要，WebKit和Firefox都不会显示水平滚动条：

如果我使用

position:absolute，也会发生同样的情况；右：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>


#包装纸{
宽度：30em；
浮动：右；/*问题行*/}
#左{
浮动：左；
宽度：10em；
背景：绿色；}
#对{
浮动：对；
宽度：20em；
背景：红色；}
左边
赖特

有没有一种方法可以在不丢失水平滚动条的情况下获得右对齐的双栏布局？

您可以使用一行表格来实现。我只检查了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时，内容将固定在右侧，当窗口狭窄时，它将从左侧边缘消失。啊。

：

我不相信在不使用javascript的情况下有任何方法可以解决这个问题。浏览器相对于页面的左上角呈现页面，因此位于该0,0点上方或左侧的任何内容实际上都不在屏幕上。所有溢出都发生在底部和右侧。这与任何块元素内部的内容是相同的。因此，如果您有一个相对于页面右侧定位的项目，其宽度大于100%。0,0原点左侧的部分将完全脱离屏幕

你不想让这件事发生。以下是您正在寻找的内容：

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

真奇怪！我在Windows 7上的FF上本地测试了它。我删除了doctype并在正文中添加了

overflow:auto

，但都没有用。我删除了我的答案，所以这个问题吸引了更多的注意力。我真的很感兴趣为什么会这样。虽然这是可能的，但您不应该在“非表”页面布局中使用表格式。快照清楚地显示导航和内容窗格，div是最好的方式。表语法应严格用于表。

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

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