Можно ли иметь ширину 1000 пикселей <div>и ширину 1300 пикселей <div>? - PullRequest
Новая
       20

Можно ли иметь ширину 1000 пикселей <div>и ширину 1300 пикселей <div>?

0 голосов
/ 12 февраля 2012

В этом отношении, я могу поместить любой широкий div в более узкий div? То, что я пытаюсь сделать, можно объяснить, посмотрев на эту страницу.
То, что я пытаюсь сделать, это иметь div с SVG-графикой шириной 1300 пикселей, чей идентификатор "wide2", перекрывается с div, называемым "center". Проблема в том, что когда я просто помещаю wide2 в центр, он выравнивается по левому краю. Оба класса div имеют свойства margin-left: auto и margin-right: auto CSS, которые работают, если предположить, что div, содержащийся в «center», уже, чем «center».
Мое решение до сих пор заключалось в том, чтобы закрыть «центр», затем сразу открыть «широкий2», а затем, сразу после закрытия этого, снова открыть «центр». Это не очень хорошая система, особенно учитывая форму рассматриваемого 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 <em>/
        background: -moz-linear-gradient(left, #bebebe 0%, #ffffff 12%, #ffffff 88%, #bebebe 100%); /</em> FF3.6+ <em>/
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bebebe), color-stop(12%,#ffffff),  color-stop(88%,#ffffff), color-stop(100%,#bebebe)); /</em> Chrome,Safari4+ <em>/
        background: -webkit-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); /</em>        Chrome10+,Safari5.1+ <em>/
        background: -o-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); /</em> Opera 11.10+ <em>/
        background: -ms-linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); /</em> IE10+ <em>/
        background: linear-gradient(left, #bebebe 0%,#ffffff 12%,#ffffff 88%,#bebebe 100%); /</em> W3C <em>/
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#bebebe',GradientType=1 ); /</em> 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;
    }

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Вот решение CSS.Добавьте следующие строки в ваш .wide2 класс CSS: 

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

Что происходит, вы сначала перемещаете более широкий div в центр более узкого div, затем translate внутренний div влево.

Вы можете увидеть это в действии здесь: https://jsfiddle.net/89f31era/

0 голосов
/ 12 февраля 2012

Вопрос очень неясен. Я полагаю, вы хотите

  1. узкий div, назовем его div1, ширина - 500px
  2. div, который шире, назовем его div2, ширина - 1000px
  3. поместите div2 внутри div1
  4. Прокрутите div1 горизонтально, чтобы увидеть центр div2 на div1.

Вы можете использовать свойство DOM ScrollLeft для выполнения прокрутки. Пример: 

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