我可以让一个 1000 像素宽的 <div> 包含一个 1300 像素宽的 <div> 吗？

Posted 2023-05-09

【中文标题】我可以让一个 1000 像素宽的 <div> 包含一个 1300 像素宽的 <div> 吗？

【英文标题】：Can I have a 1000px-wide <div> contain a 1300px-wide <div>?

【发布时间】：2012-03-04 00:51:32

【问题描述】：

就此而言，我可以将任何宽 div 放在更窄的 div 中吗？可以通过查看this 页面来解释我正在尝试做的事情。 我想要做的是让 div 与 1300 像素宽的 SVG 图形（其 id 为“wide2”）重叠在名为“center”的 div 上。问题是，当我将 wide2 放入中心时，它向左对齐。两个 div 类都有 margin-left: auto 和 margin-right: auto CSS 属性，假设 "center" 中包含的 div 比 "center" 窄，它们可以工作。 到目前为止，我的解决方案是关闭“center”，然后立即打开“wide2”，然后在关闭那个之后立即重新打开“center”。这不是一个很好的系统，尤其是考虑到所讨论的 SVG 的形状。 谁能帮帮我？

（每个请求）相关类的 CSS。

div.center 显示：块； 左边距：自动； 边距右：自动； 边距顶部：0； 边距底部：0； 填充底部：0； 填充顶部：0； 高度：100%； 宽度：1000px； 背景：#bebebe; /* 旧浏览器 / 背景：-moz-linear-gradient（左，#bebebe 0%，#ffffff 12%，#ffffff 88%，#bebebe 100%）； / FF3.6+ / 背景：-webkit-渐变（线性，左上角，右上角，color-stop(0%,#bebebe), color-stop(12%,#ffffff), color-stop(88%,#ffffff), color-停止（100%，#bebebe））； / Chrome、Safari4+ / 背景：-webkit-linear-gradient（左，#bebebe 0%，#ffffff 12%，#ffffff 88%，#bebebe 100%）； / Chrome10+,Safari5.1+ / 背景：-o-线性渐变（左，#bebebe 0%，#ffffff 12%，#ffffff 88%，#bebebe 100%）； / Opera 11.10+ / 背景：-ms-线性渐变（左，#bebebe 0%，#ffffff 12%，#ffffff 88%，#bebebe 100%）； / IE10+ / 背景：线性渐变（左，#bebebe 0%，#ffffff 12%，#ffffff 88%，#bebebe 100%）； / W3C / 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#bebebe', endColorstr='#bebebe',GradientType=1); / IE6-9 */ 边框底部：0； 边界顶部：0； 边距顶部：0； 边距底部：0； 填充底部：0； 填充顶部：0； div.wide2 显示：块； 左边距：自动； 边距右：自动； 边距顶部：0； 边距底部：0； 填充底部：0； 填充顶部：0； 身高：180； 宽度：1300 像素； 边框底部：0； 边界顶部：0； 边距顶部：0； 边距底部：0； 填充底部：0； 填充顶部：0；

【参考方案1】：

这个问题很不清楚。我想你想

一个很窄的 div，我们称之为 div1，宽度 - 500px 一个更宽的 div，我们称之为 div2，宽度 - 1000px 将 div2 放在 div1 中 水平滚动 div1 以查看 div1 上的中心 div2。

您可以使用 ScrollLeft DOM 属性来执行滚动。例如：

<div style="background-color:#093; width:200px; overflow:scroll" id="sc1">&nbsp;
    <div style="background-color:#033; width:400px;">&nbsp;
    </div>
</div>
<script type="text/javascript">
    document.getElementById("sc1").scrollLeft="30";
</script>

【讨论】：

如果我没有说清楚，我很抱歉；我想让一个宽 div (wide2) 居中， 和 重叠一个较窄的 div，center。

【参考方案2】：

这是一个 CSS 解决方案。 将以下行添加到您的 .wide2 css 类中：

margin-left: 50%;
transform: translate(-50%);

您首先将较宽的 div 移动到较窄的 div 的中心，然后将translate 向左移动内部 div。

你可以在这里看到它的实际效果：https://jsfiddle.net/89f31era/