如何通过子div宽度/填充/边距/框强制父div扩展？
我想用div 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>
bot*_*bot 37
您的问题的关键解决方案是使用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;
}
这是工作小提琴
- 块元素将占用父元素必须提供的水平空间，而内联块将占用显示内容所需的水平空间（除非被覆盖）。如果内联块大于父块，它将溢出。您可以通过设置“width: fit-content”来创建块元素来评估内容宽度，但这与 IE 不兼容。 (3认同)
- 这就是我需要的......现在......了解为什么......有人吗？ (2认同)
You cannot use % and expect box to overflow, else it never ends 100% turns 120%, but then 120% of 120%, becomes .. and so on. forget this idea, it cannot work.
Your CSS request is incoherent.
Beside, to see an element to grow wider than window, one of the parent must be able to behave this way, mostly , content overflow and remain visible. (html/body or parent)
as far as i know only:
display:
tableinline-tabletable-rowtable-cell
Can let container grow as much as content does.
| 归档时间： |
|
| 查看次数： |
46487 次 |
| 最近记录： |