34

我想用子 div 扩展 div 父级，但我不知道这是否可能以及如何做到这一点。

在此处输入图像描述

我准备了一个小提琴并包含了一些代码。

CSS

body {
    background: gray;
}
div.page {
    color: white;
    background: black;
    max-width: 72em;
    margin: auto;
    padding: 1em;
}
div.one {
    background-color: red;
    width: 40%;
}
div.two {
    background-color: green;
    width: 120%;
}

HTML

<body>
    <div class="page">
        <div class="one">One</div>
        <div class="two">Two</div>
    </div>
</body>
4

3 回答 3

43

您的问题的关键解决方案是使用display:inline-block;

HTML

body {
    background: gray;
}
div.page {
    color: white;
    background: black;
    margin: auto;
    padding: 1em;
    display:inline-block;
}
div.one {
    background-color: red;
    width: 10em;
    display:inline-block;
}
div.two {
    background-color: green;
    width: 40em;
    display:inline-block;
}
<div class="page">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>

于 2013-06-25T09:27:16.497 回答
8

您不能使用 % 并期望框溢出，否则它永远不会结束 100% 变成 120%，但随后 120% 的 120% 变成 .. 等等。忘记这个想法，它行不通。

您的 CSS 请求不连贯。

此外，要看到一个元素变得比 window 更宽，其中一个父元素必须能够以这种方式表现，主要是内容溢出并保持可见。（html/body 或父级）

据我所知：

display:
  1. table
  2. inline-table
  3. table-row
  4. table-cell

可以让容器和内容一样多地增长。

于 2013-06-25T08:31:32.230 回答
2

你的问题是这样的：

div.two {
        background-color: green;
        width: 120%;
}

您是在告诉孩子宽度是父母宽度的 120%，也就是说，整个宽度再加上 20%。让它100％，你应该得到预期的结果..

于 2013-06-25T07:39:40.907 回答