致力于为客户的内部网重新设计外观。我无法修改现有的 HTML,只能提供覆盖样式表。
在 HTML 中是一个主体内容包装器 - 任何时候调整窗口大小时,它都会获得一个明确的宽度和高度设置,内联到窗口宽度和高度:
<div id="s4-workspace" style="height: 660px; width: 1331px;">
现在,一些页面在这个内容包装器中有一个大表格(至少 1600 像素宽),当窗口小于这个时,表格会脱离容器,留下所有背景和填充。所有其他元素都遵循包装宽度,向右滚动时会产生一大堆负空间:
有没有办法覆盖行内宽度并允许容器 div #s4-workspace
拉伸(stretch)到其内容?我最好的猜测是设置 width: auto !important;
,但 chrome 和 firefox 仍然优先考虑内联样式。感谢您的帮助。
最佳答案
在您的特定实例中(覆盖宽度/高度以防止内容溢出),更改显示类型将满足您的需要:
http://cssdeck.com/labs/kfpnpruw
<div class="foo" style="width: 400px; height: 300px;">
Foo
<img src="http://placekitten.com/600/300" /><!-- 600x300 image -->
</div>
.foo {
background: yellow;
display: table-cell;
padding: .5em;
}
设置为表格单元格的元素会将宽度和高度属性视为建议值,而不是绝对值。
关于html - 覆盖 <div> 内联宽度样式以使元素拉伸(stretch)到内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17172584/