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 分重叠?
最佳答案
将其用作您的 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/