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

Here is a nice tutorial有关如何创建包含主要部分和侧边栏的Web布局的信息。我专注于浮动示例。

我的问题是：是否可以正确地将横杆的位置从左侧移动到右侧？我用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条（未定义的文本行与页脚部分不重叠）的条形（一个在左边，一个在右边）？

最佳答案

将此用作您的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>

关于html - 如何将元素从左侧移动到右侧？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39181150/