Question

我有以下布局： http://jsfiddle.net/yHPTv/2487/

我需要做的是将.hidden类隐藏到.block类的右边缘，并将其仅显示（通过滑入）悬停到您在其中看到的当前位置的jsfiddle。

问题是，.hidden类是可变宽度的，这意味着它内部的内容（ABCDEFGHIJKL）可以完全不同，有时更短，有时更长。

我该如何解决这个问题？

修改：要明确我的意思，将其隐藏在.block课程的右边缘，我的意思是like this，除非它不会被展示

HTML：

<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>

CSS：

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 1

要解决我自己的问题，我只是从right: 0移除了.block .hidden并放置了left: 100%。

http://jsfiddle.net/yHPTv/2488

HTML：

<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>

CSS：

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    left: 100%;
}

将可变宽度元素隐藏到右侧

1 个答案: