wide <div> contain a 1300px

For that matter, can I place any wide div in a narrower div? What I'm trying to do can be explained by looking at this page.
What I'm trying to do is have the div with the 1300px-wide SVG graphic – whose id is "wide2" – overlap over the div called "center." The problem is that, when I just put wide2 into center, it aligns left. Both the classes of div have margin-left: auto and margin-right: auto CSS properties, which work, assuming the div contained in "center" is narrower than "center."
My solution so far has been closing "center", then immediately opening "wide2", and then, immediately after closing that one, re-opening "center." It's not a great system, especially given the shape of the SVG in question.
Can anyone help me out?

(per request) The CSS of the classes in question.

        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;
    }
    

---

The question is very unclear. I presume you want to

a div which is narrow, lets call it div1, width - 500px

a div which is wider, lets call it div2, width - 1000px

place div2 inside div1

Scroll div1 horizontally so as to see center div2 on div1.

You may use the ScrollLeft DOM property to perform scrolling. Ex:

<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>

---

Here is a CSS solution. Add the following lines into your .wide2 css class:

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

What's happening is you first move the wider div to the center of the narrower div, then translate the inner div left.

You can see it in action here: https://jsfiddle.net/89f31era/

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

上一篇: 如何在Safari中发送键盘事件（例如Backspace，Delete）

下一篇: 宽的<div>包含1300px