gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:49:26 25 4
gpt4 key购买 nike

我想要一个包含两个右对齐列的布局。因此,我创建了三个 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 float 到右侧,如果需要,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;
}

关于css - 右对齐双列布局丢失水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2218943/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com