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

2023年2月28日 238次阅读

我想要一个带有两个右对齐列的布局.所以,我创建了三个div(两列和一个包装器)：

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

我向左浮动div div,向右浮动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

..然后我将包装器div浮动到右侧,如果需要,WebKit和Firefox都不会显示水平滚动条：

Without the right align http://img690.imageshack.us/img690/8559/withoutrightalign.png

如果我使用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>

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

最佳答案 你不想要花车.这是你要找的东西：

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