如何通过子div宽度/填充/边距/框强制父div扩展？

时间：2013-06-25 07:27:18

标签： html css

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

enter image description here

我准备了fiddle并添加了一些代码。

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>

3 个答案:

答案 0 :(得分：34)

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

的 HTML 

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

<强> CSS 

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;
}

这是工作fiddle

答案 1 :(得分：8)

你不能使用％和期望的盒子溢出，否则它永远不会结束100％转120％，但120％的120％，变成......等等。忘记这个想法，它无法运作。

您的CSS请求不连贯。

此外，要看到一个比窗口更宽的元素，其中一个父元素必须能够以这种方式运行，主要是内容溢出并保持可见。 （html / body或parent）

据我所知：

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

    5. 可以让容器像内容一样增长。

答案 2 :(得分：2)

你的问题是：

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

你告诉孩子的父母宽度是120％，也就是说，整个宽度加上20％。百分之百，你应该得到预期的结果..

相关问题
最新问题