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

Question

关于如何使用主要部分和横向栏创建Web布局。我专注于浮动示例。

我的问题是：是否可以将侧杆的位置从左侧正确移动到右侧？我已使用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>标记内复制多次result = tree.xpath('//tr/td/font/text()') iter_result = iter(result) for line in iter_result: if 'item_3' in line: print(next(iter_result)) ）横条的内容与页脚重叠！如果我对左侧的栏进行相同操作（如示例中所示），则页脚正确移动到页面底部以容纳额外数据但是垂直灰色条将主要部分分开存在问题到侧栏。

如何解决这个问题？如何修改布局以使2个条形（一个在左边，一个在右边），未定义的文本行不与页脚部分重叠？

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>

Answer 2

您必须想象自己如何构建html文件以及如何显示它。您拥有的所有容器都以简单的html列在下面。使用css，您可以通过设置组件尺寸和边距以及填充来定义浮动结构。要水平对齐组件，您需要一个具有固定像素大小的包装容器（例如正文或正文中的div）。然后你可以定义例如3个组件，左侧栏，文章中间栏和右侧栏。这些容器将是包装器的子容器，因此它们在其中定义。这些子容器通常用％来表示大小，并用边距精确定位它们。在chrome和firefox中，您可以在Box-Model下的开发控制台中看到边距和填充（按F12）。 Css可能非常令人沮丧。当我通过建立自己的网站自己进行教学时，我失去了很多我的网站。 您可以查看我的网站以供参考。它是一个简单的Html / Css网站，没有JS或php的定位。 它不是最漂亮的网站，但结构框架可以正常工作。见这里：http://richardrudolph.com/

Answer 3

我不确定这是不是你想要的。导航在右边。

<https://jsfiddle.net/zpupster/v659zpod/>

Answer 4

也许你想要阅读更多关于CSS网格的内容，他们做了这样的工作，你可能会觉得很乏味。

暂时我真的没有很好地回答你的问题，但我相信如果你把HTML的每个部分都包含在正确的标签中，你就可以使用CSS float属性将它们放在你想要的任何地方。所以侧栏我相信这是旁边的部分，它将在旁边标签

<aside>
 <ul>
  <li>
   <a href="http://foo.com"> this is a dummy link</a>
 </li>
</ul>

你只需将整个标签向右浮动，因为它默认会浮动到左边，所以CSS

aside{float:right;}