2

好的，我有一个问题在那里。简而言之，这是一个 fiddle。我将在这里重复自己：

HTML：

<div class="container">
        <div class="selected">
            <span>Why don't you cover all the width!?</span>
        </div>
        <div>
            <span>Little content</span>
        </div>
</div>

CSS：

.container {
    width: 100px;
    white-space: nowrap;
    background-color: #0f0;
    overflow-x: auto;
    height: 200px;
}

.selected {
    background-color: #f00;
    white-space: nowrap;
}

第一个问题是：为什么innerdiv的背景没有覆盖整个span？第二个：当然，我想要修复。

还有一件事：html元素是由第三方工具生成的，我无权访问，这使得“将它全部包装在另一个div中”的事情变得不可能。只有CSS，只有铁杆！

更新：

顺便说一句，容器本身是可调整大小的（准确地说是 a frameinside a ）。frameset

编辑：

我已经更新了小提琴以提供更多信息。The problem is, that when the second divwill be selected, I'd like the red background to stretch to the width of the longest line.

更新 2：

上述问题可以通过display: table-row;（见这里）来解决。棘手的事情是即使内容比容器本身宽（小提琴）也能做到这一点。

4

3 回答 3

3

Divswidth:auto默认有。所以内部 div 是 100px 宽，就像外部一样。跨度从 div 溢出。

在这种特殊情况下，最简单的解决方案是给内部 div display:inline-block

div div {display:inline-block}

这样它就不再适合其父代，而是将自己塑造成其内容的宽度。

更新了小提琴。

编辑：回答你的第二个问题：是的， display:inline-block 阻止selecteddiv 与容器一样宽。
幸运的是，这可以通过添加来纠正

min-width:100%;

除了显示：内联块。查看更多更新的小提琴。

另一个编辑：
问题一直在变化。现在是关于框架集中的框架。那好吧。这是解决现在制定的问题
的最新小提琴。但让我们看看未来会发生什么变化……

于 2014-02-12T15:23:39.153 回答
2

我认为您只需要将背景颜色应用于跨度而不是 div。

http://jsfiddle.net/M294p/8/

HTML：

<div class="container">
    <div class="selected">
        <span>Why don't you cover all the width!?</span>
    </div>
    <div>
        <span>Little content</span>
    </div>
</div>

CSS：

.container {
    width: 100px;
    white-space: nowrap;
    background-color: #0f0;
    overflow-x: auto;
    height: 200px;
}

.selected {
    background-color: #f00;
    white-space: nowrap;
    display:inline-block;
}
于 2014-02-12T15:25:37.873 回答
1

第一个问题的答案是因为您对父 div 有明确的宽度。您可以应用display: inline-block到内部 div 并width: 100px从父级中删除。

HTML

<div>
    <div class="test">
        <span>Why don't you cover all the width!?</span>
    </div>
</div>

CSS

.test {
     background: red;
    display: inline-block;
}

一个例子：http: //jsfiddle.net/M294p/6/

于 2014-02-12T15:26:58.417 回答