Question

我有两个元素，都有display：inline-block，而parent有white-space：nowrap。

调整屏幕大小时，右侧的div不会调整大小，例如this。

我试图只调整蓝色div调整大小。

html的结构如下：

<div class="container">
    <div class="header">...</div> <!-- red -->
    <div class="aside">...</div>  <!-- pink -->
    <article>...</article>        <!-- blue -->
</div>

相关的css：

* {
    box-sizing: border-box;
}

div.container {
    margin: 0 auto;
    max-width: 40em;
    padding: 0;
    white-space: nowrap;
}

div.container > * {
    white-space: normal;
}

.aside {
    display: inline-block;
    max-width: 15em;
    vertical-align: top;
}

.article {
    display: inline-block;
    max-width: 25em;
}

Answer 1

古老的问题，但出于对阅读此书也有疑问的任何人的了解：

我发现的是该设置位置：.container上的相对位置和位置：绝对是.article上我想要的。

绝对定位的元素相对于最近定位的祖先定位，其中，定位的元素表示具有不同于静态属性的位置属性，默认为< / strong>;如果找不到任何定位的元素，则使用body元素。

绝对定位元素（如果具有自动宽度和高度），将调整大小以适合其内容，并通过其定位祖先限制最大尺寸。您可以检查这一点，以短字符串代替大字符串：元素将缩小为文本的长度。如果您从div.container中删除定位，则该文章（如果仍然定位为绝对）将增长（取决于其内容）以覆盖先前元素和正文宽度之间的空间。

并且，与上述内容相关，并为延迟回答添加了一些实用工具，这不是一个非常了解的好处：如果您定义绝对定位元素的right和left属性，并将width保留在auto中，则该元素将覆盖定义的左右之间的水平尺寸。这样，您可以输入

article { background-color: #a0f4ec; display: inline-block; position: absolute; right: 0; left: 30%; } div.aside { background-color: #faf; display: inline-block; max-width: 15em; width: 30%; }

此技巧也适用于垂直方向，但具有高度，顶部和底部属性。

Answer 2

有几种方法可以做到这一点。方法1： two divs the same line, one dynamic width, one fixed

方法2（负边距） http://alistapart.com/article/negativemargins

Answer 3

不幸的是，Narxx的答案要求div浮动。我敢肯定，如果你正在建立一个真实的网站，你应该怎么做，但在我的情况下，我试图不使用它。

我发现在position: relative上.container和position: absolute .article设置{{1}}可以实现我的目标。

Simplified fiddle

如果有人能解释原因，我会将其标记为答案。

div与内联块没有调整大小

3 个答案: