Question

我的网站上有一个div，其中包含一个用作菜单的项目列表。我设置了CSS width:auto，以便在菜单项太长时重新调整大小。目前，这将扩展到右侧，并将其余内容“推”到右侧。

这很难解释为例如果你转到http://redsquirrelsoftware.co.uk/并单击“支持”菜单项，就可以看到正在推送的内容。我想要发生的是div扩展到菜单左侧的空白区域。

目前我对div的CSS是：

.sidebar1 {
    float: left;
    width: auto;
    min-width: 25%;
    max-width: 29%;
    margin-top: 65px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 12px;
}

有没有办法让它扩展另一种方式？提前谢谢。

Answer 1

我发现在不使用浮点数或绝对定位的情况下执行此操作的另一种方法是在父项上使用direction: rtl，然后在子项上重置它：

.parent { direction: rtl; }
.parent > * { direction: ltr; }
.child { width: 200px; }
.child:hover { width: 400px; }

代码笔：http://codepen.io/heisters/pen/gMgboJ

（抱歉，我无法将该示例建立在OP的网站上，因为链接似乎已经死了。）

Answer 2

这个想法需要测试，但至少在Chrome中有效：

将.content和.sidebar1更改为float: right而不是float: left。
在HTML中，在.sidebar1之后移动.content。

使div自动展开宽度向左而不是向右

2 个答案: