单列变双列css_css – 右对齐双列布局丢失水平滚动条

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

First column

Second column

我向左浮动div div,向右浮动div,并为所有三个div设置正确的宽度：

#wrapper{

width:30em;

}

#left{

float:left;

width:10em;

}

#right{

float:right;

width:20em;

}

这一切看起来都像预期……

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

如果我使用position：absolute,会发生同样的情况;右：0

完整示例HTML文档：

#wrapper{

width:30em;

float:right; /* The problem line */}

#left{

float:left;

width:10em;

background: green;}

#right{

float:right;

width:20em;

background: red;}

Left

Right

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

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

#wrapper{

width:30em;

margin-right: 2px;

margin-left: auto;

}

#left{

float:left;

width:10em;

background: green;

}

#right{

float:right;

width:20em;

background: red;

}

单列变双列css_css – 右对齐双列布局丢失水平滚动条相关推荐

【awk】输出不同列、左对齐or右对齐
输出第一列(左对齐) awk '{print $1}' 输出最后一列(右对齐) awk '{print $NF}' 输出倒数第二列(右对齐) awk '{print $(NF-1)}'
html字段靠右对齐,CSS-在HTML标签中右对齐文本的更好方法
CSS-在HTML标签中右对齐文本的更好方法我有一个包含大量行的HTML表,并且我需要右对齐一列. 我知道以下方式, ....10.00 和 ....10.00 在这两种方法中,我必须在每个2707 ...
html中把句子往右边弄一点咋办,CSS上的左，中，右对齐方法，可以在一行上混合...
一种用CSS以左对齐/中心对齐/右对齐方式显示用HTML编写的句子的方法在用"从左到右书写的语言"(如日语和英语)中编写的HTML中,除非指定了字符移位方向,否则句子左对齐显示. ...
el-table 设置表头居中，表格内容某一列单独居中或左对齐或者右对齐
方法: 表头可以用::header-cell-style="{'text-align':'center'}" 具体列可以分别设置align="left" ali ...
横列式倾转双旋翼飞行器仿真
这里写自定义目录标题横列式倾转双旋翼飞行器仿真 1.圆形轨迹跟踪 2.Simulink模块横列式倾转双旋翼飞行器仿真 1.圆形轨迹跟踪 2.Simulink模块参考信号输入控制输入与分配被控 ...
printf函数中用到格式符%5s ,其中数字5表示输出的字符串占用5列。如果字符串长度小于5,则输出按方式。 A)从左起输出该字串,右补空格 B)按原字符长从左向右全部输出 C)右对齐输出该字串,左
printf函数中用到格式符%5s ,其中数字5表示输出的字符串占用5列.如果字符串长度小于5,则输出按方式. A)从左起输出该字串,右补空格 B)按原字符长从左向右全部输出 C)右对齐输出该字串,左 ...
echarts 上下双坐标轴Y轴对齐
1.问题:不同的数据源用同一个布局页面来显示会导致对齐一个页面另外的页面Y轴对不齐,如下图: 图1: 图2: 结果发现图1,对齐了,图2跑偏了,可是明明是同一个布局. 后来经过观察发现,图1和图二的下 ...
oracle右对齐,Oracle 学习笔记（基础）
1.基本查询特殊运算符运算功能实例 [NOT] BETWEEN-AND- 用于测试是否在范围内 Select * from emp Where sal between 1000 and ...
word公式编号怎么右对齐_8个能帮你大忙的Word技巧，建议花几分钟学起来！
一.排版技巧 1.页面布局 Word文档中,有一个[页面布局]设置,大家可以通过这个设置来排版哦.在[页面布局]中,大家可以完成这些操作:纸张方向.文字方向.页边距.分栏等等,另外大家还可以直接在里面 ...
VB输入文本文件实现右对齐
在写入数值时使用 Format 函数: Format(x,String(n,"@")) 此函数的执行结果就是左侧空格的右对齐文本, 其中 x 是要转化的数字(或文本),n 是数字( ...

单列变双列css_css – 右对齐双列布局丢失水平滚动条

单列变双列css_css – 右对齐双列布局丢失水平滚动条相关推荐

最新文章

热门文章