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

【问题标题】：Can I have a 1000px-wide <div> contain a 1300px-wide <div>?我可以让一个 1000 像素宽的 <div> 包含一个 1300 像素宽的 <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； }

【问题讨论】：

标签： html svg center

【解决方案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/

【讨论】：