如何将单个块向左移动？答案

【问题标题】：How to move a single block to the left?如何将单个块向左移动？
【发布时间】：2014-06-24 09:17:00
【问题描述】：

在我的 Drupal 7 网站上，我在一个名为“Topbar links”的环境中有三个块，布局如下：http://jsfiddle.net/Jeroen94/54L57/1/。

请注意，第一个和第三个块是不错的菜单。我没有提供所有的代码，因为大部分是不相关的，但布局应该保持。这三个块显示在右侧，但现在，我想在左侧显示“Nice Menu 1”，并在右侧保留“My Profile”和“Nice Menu 2”。我以为

.menu-1 {
  left: 0;
}

可以解决问题，但这不起作用，因为我无法覆盖right。也许right: ...px 可以解决“Nice Menu 1”的问题，但我认为这不是一个好的解决方案，因为“Topbar links”的宽度将来仍会发生变化，从而导致布局中断。

我该如何解决这个问题？

【问题讨论】：

#block-1{ float: left;} 可能会起作用。
block-1 也是一个类
1) #block-1 {left: 0;} 2) 如果您需要绝对位置，请将宽度设置为 #block-2 和 #block-3 并设置 right: 根据它们的规则宽度
确保你的 .topbar-links 有 width:100%;这可能会按原样工作..

标签： css drupal

【解决方案1】：

我会使用float 来解决这个问题，就像这样

.topbar-links {
    position: absolute;
    right: 0;
    top: 0;
    vertical-align: top;
    width: 100%;
}

.topbar-links div {
    float:right;
    clear:right;
}

#block-1 {
    float:left;
}

http://jsfiddle.net/Y7mwW/

【讨论】：

太好了，'Block 1' 显示在左侧。不幸的是，我不能使用clear:right;，因为这些块不仅仅包含文本，而且整个布局都被那条线破坏了。当我删除它时，“块 2”和“块 3”交换位置。有解决办法吗？
@Jeroen 在您的问题中发布您的实际内容的精简版。对于我们没有所有详细信息的事情，很难提出解决方案。
我已经用 Fiddle 链接更新了我的问题，并更好地解释了我的情况。希望这会有所帮助。

【解决方案2】：

问题是您将父 div 定位在右侧而不设置宽度 - div 的子级只能定位在父 div 的常量内

您也可以使用 :first-child 选择器来选择第一个，这样就不需要单独的类了。

试试

<div class="topbar-links">
 <div id="block-1">Some content</div>
 <div id="block-2">Some content</div>
 <div id="block-3">Some content</div>
</div>

.topbar-links {
    position: absolute;
    right: 0;
    top: 0;
    vertical-align: top;
    width: 100%;
}

.topbar-links div {
    float: right;
}

.topbar-links div:first-child {
    float: left;
}

JSFiddle http://jsfiddle.net/JC9ac/

另一种停止切换您提到的元素的解决方案 jsfiddle.net/JC9ac/2

【讨论】：

这对我来说似乎是个好主意，但是“Block 2”和“Block 3”在您的解决方案中互换了位置。
是的，这是由于向右浮动和浏览器呈现内容的方式 - 您可以在 div 上设置百分比宽度并在第一个孩子上设置一个边距，这将迫使他们移动到右边。
@Jeroen - 好的，让我知道你的目标是什么，我会尝试把一些东西放在一起。
好吧，我只想在左侧显示第一个菜单，而不更改任何块的显示。我认为这应该很容易做到，但是我对花车的了解还不够。
我认为你最好的解决方案是我建议的第一个，只需切换第二个和第三个 div :)

【解决方案3】：

使用以下代码更新您的 css：

.topbar-links{
    text-align: right;
}

.block-1{
    float: left;
}

如果需要查看块内联添加

#block-1,
#block-2,
#block-3{
    display: inline;
}

fiddle

【讨论】：