html - 如何将元素从左侧移动到右侧？

Question

Here is a nice tutorial关于如何创建具有主要部分和横向栏的网页布局。我专注于 float 示例。

我的问题是:是否可以将侧杆的位置从左侧适当移动到右侧？我已经更改了行 float: right;与 float: left; , margin-right: 170px ;与 margin-left: 170px;和 border-right: 1px solid gray;与 border-left: 1px solid gray; .

通过这样做，栏会移到右侧，但如果我增加横向栏内的行文本数量(例如，通过在 <li><a href="#">London</a></li> 标签内复制多次 <ul>)，横向栏与页脚重叠!如果我对左侧的栏执行相同操作(如示例中所示)，页脚会正确移动到页面底部以容纳额外数据，但分隔主要部分的垂直灰色栏存在问题到侧栏。

如何解决？如何将布局修改为具有 2 个栏(一个在左侧，一个在右侧)，其中未定义的文本行不与页 footer 分重叠？

Answer 1

将其用作您的 CSS

#left-bar{
float:left;
width:100px;
height:100%;
border-right:1px solid black;
}
#right-bar{
float:right;
width:100px;
height:100%;
border-left:1px solid black;
}

您的 HTML 将如下所示

<div id="left-bar">This is on the left</div>
<div id="right-bar">This is on the right</div>