代码之家 › 专栏 › 技术社区 › dbr

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

css

dbr · 技术社区 · 16 年前

我想要一个有两列右对齐的布局。因此,我创建了三个div(两列和一个包装):

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

left 左分区, right

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

3 回复 | 直到 16 年前

Julik 16 年前

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

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

awhyte 16 年前

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

Community Mohan Dere 8 年前

Found an explanation of why this is happening :

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