宽的<div>包含1300px

对于这个问题,我可以把宽的div放在一个更窄的div中吗? 我试图做的事可以通过查看这个页面来解释。
我想要做的是使用宽度为1300px的SVG图形 - 其ID为“wide2” - 与称为“中心”的div重叠。 问题是,当我把wide2放到中间时,它左对齐。 这两个类的div都有margin-left:auto和margin-right:auto CSS属性,假设div包含在“center”中的div比“center”窄。
到目前为止,我的解决方案是关闭“中心”,然后立即打开“wide2”,然后在关闭那个之后立即重新打开“中心”。 这不是一个好的系统,尤其是考虑到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;
    }
    


这个问题很不明确。 我想你想要

  • 一个窄的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>
    

    这是一个CSS解决方案。 .wide2添加到.wide2 css类中:

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

    发生什么事是你首先将更宽的div移动到更窄的div的中心,然后translate左边的内部div。

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

    链接地址: http://www.djcxy.com/p/49175.html

    上一篇: wide <div> contain a 1300px

    下一篇: jquery's append not working with svg element?