Question

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

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

.menu-1 {
  left: 0;
}

可以做到这一点，但这不起作用，因为我无法覆盖right。也许right: ...px可以为'Nice Menu 1'做点什么，但我找不到一个很好的解决方案，因为来自'Topbar links'的宽度在将来仍然会改变，导致布局中断。

我该如何解决这个问题？

Answer 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/

Answer 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

Answer 3

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

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

.block-1{
    float: left;
}

如果您需要查看内嵌块添加

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

fiddle

如何向左移动一个块？

3 个答案: