首页 文章

我可以在1000px宽的<div>中包含1300px宽的<div>吗？

提问于
浏览 次
0

就此而言，我可以在较窄的div中放置任何宽div吗？我正在尝试做的事情可以通过查看this页来解释 .
我正在尝试做的是使用1300px宽的SVG图形 - 其id为"wide2" - 与div重叠，称为"center."问题是，当我将wide2放入中心时，它对齐左边 . div的两个类都有margin-left：auto和margin-right：自动CSS属性，这是有效的，假设"center"中包含的div比"center."窄
到目前为止我的解决方案已经关闭"center"，然后立即打开"wide2"，然后，在关闭那个之后立即重新打开"center."这不是一个很好的系统，特别是考虑到SVG的形状 .
谁能帮我吗？

（根据请求）有问题的类的CSS .

div.center
        {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
        height: 100%;
        width: 1000px;
        background: #bebebe; /* Old browsers /
        background: -moz-linear-gradient(left, #bebebe 0%, #ffffff 12%, #ffffff 88%, #bebebe 100%); / FF3.6+ /
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bebebe), color-stop(12%,#ffffff),  color-stop(88%,#ffffff), color-stop(100%,#bebebe)); / Chrome,Safari4+ /
        background: -webkit-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); /        Chrome10+,Safari5.1+ /
        background: -o-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / Opera 11.10+ /
        background: -ms-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / IE10+ /
        background: linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); / W3C /
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#bebebe',GradientType=1 ); / IE6-9 */
        border-bottom: 0;
        border-top: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }

div.wide2
        {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
        height: 180;
    width: 1300px;
        border-bottom: 0;
        border-top: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
html svg center

2 回答

  • 0

    这个问题非常不清楚 . 我认为你想要

    • 一个狭窄的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>
    回复于
  • 0

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

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

    发生的事情是你首先将较宽的div移动到较窄div的中心，然后将内部div移开 .

    你可以在这里看到它：https://jsfiddle.net/89f31era/

    回复于

相关问题