html - 如果 child 较小，则继承​​父宽度 - child 定位绝对

Question

我正在为我的元素使用 Twitter Bootstraps 网格。我有以下 HTML:

<div class="row-fluid">
    <div class="span4 item">
        <div class="inner">Some text</div>
    </div>

    <div class="span4 item">
        <div class="inner">Some text</div>
    </div>

    <div class="span4 item">
        <div class="inner">Some text</div>
    </div>
</div>

和以下 CSS:

.item {
    position: relative;
}

.item .inner {
    background: #fff;
}

.item:hover .inner,
.item .inner:hover { // I did them both because on mobile it catches only the first
    position: absolute;
}

结果是当我悬停“.item .inner”时，元素的长度与“.item”相同。在“.inner”内部我可能有宽度未知的图像，我希望这些图像在鼠标悬停时拉伸(stretch)到它们的真实宽度但是因为“.item .inner”被限制为“.item”的宽度(可能是任何东西，取决于用户屏幕)“.item .inner”不会拉伸(stretch)。

我想也许可以从“.item”中删除“position: relative”，这允许“.item .inner:hover”根据需要扩展，但如果内容短于“.item”的宽度，它会缩小 - 这是我不想发生的特征

如何实现它？

---

编辑:

在第一种情况下，您可以看到我现在所拥有的 - 当您将鼠标悬停在文本上时，它会失去宽度 - 但如果您将鼠标悬停在图像上，它会拉伸(stretch)。 http://jsfiddle.net/g5nP7/

在这种情况下，您可以看到，如果将鼠标悬停在文本上，它不会失去宽度，但如果将鼠标悬停在图像上，它不会拉伸(stretch)。 http://jsfiddle.net/dT7c5/4/

我想要的是当你悬停一个文本时——只有当里面的内容比悬停时元素的宽度长时，它才会拉伸(stretch)。如果内容比元素短，我不希望它缩小

同样如您在两个示例中所见，如果您将鼠标悬停在图像上，它会失去高度并迫使其他元素上升。

Answer 1

我能想出的唯一纯 CSS 解决方案是结合使用 max-width 和 min-width，去掉 max-悬停时的宽度。 Bootstrap 让它更难使用，但本质上我删除了 span4 CSS 并使用媒体查询来实现非常相似的效果

... Some other CSS ...
.item .inner {
    ...
    width:auto;
}
.item:hover .inner, .item .inner:hover {
    max-width:none;
}
.span4.item { width:auto; }
@media screen and (min-width:980px) {
    .item .inner {
        min-width:265px;
        max-width:265px;
    }
}
@media screen and (max-width:980px) and (min-width:770px) {
    .item .inner {
        min-width:200px;
        max-width:200px;
    }
}

Demo here .它不是 100% 完美的，因为它使用媒体查询断点而不是 Bootstrap 使用的那种网格系统(我尝试使用百分比宽度来模仿原始功能但它破坏了它)，但是对于媒体查询很难区分。唯一的问题是您可能想要为更大的屏幕添加另一个媒体查询，以使其更适合屏幕