9 положений css основные fixed внутри div внутри div

Мне хотелось бы, что они помогли мне размещать 9 основных положений внутри div внутри div, как он появляется в примере. 9 положений были бы: Прямой начальник, Левый Начальник, Верхний Сентро. Прямой центр, Левый Центр, Прямой Центр. Нижний Прямое, Нижнее Левое, Нижнее Право. Как divs - различного размера и часто не определяя, (какие-то будут текстом) я предполагаю, что он был бы должен идти в процентном содержании. div у отца также не будет определенная ширина, так как он также подчинится составу текста. Спасибо.

body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000;  margin-top:0;}
#wraper{width:100%;  padding-top:30px;}
.basic_unit{width:800px; height:1200px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}
.basic{width:200px; height:200px; background:yellow;}
.fixed {position:fixed;}
.top_left{ top:30; right-margin:0%;}
.top_right{ top:30px; right:0%;}
#container{overflow:hidden;display:inline-block; margin:auto;}
#wraper{text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wraper">
<div id="container">
<div class="basic fixed top_left"></div>
<div class="basic fixed top_right"></div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
</div>
</div>
2
задан 17.03.2016, 02:22
1 ответ

Здесь я оставляю пример того, как ему было бы возможно удаваться без процентного содержания. Это решение основывается в:

  • Делать, что div внутреннее помещение заняло полный размер div внешняя сторона
  • Добавлять относительное положение (position:relative) в div внутреннее помещение
  • Класс basic он идентифицирует 9 положений и у него будет абсолютное положение (position:absolute). Таким образом всегда он приспособится внутри div отец.
  • Определять 6 основных положений:
    • Arriba/top: который у него будет top:0.
    • Abajo/bottom: который у него будет bottom:0.
    • Centro/center: который у него будет top:50% и перенесение-50 % горизонтально.
    • Izquierda/left: который у него будет left:0.
    • Derecha/right: который у него будет right:0.
    • Centro/middle: который у него будет left:50% и перенесение-50 % вертикально.
  • В случае, если класс Центр - Центр (center middle), повторно определяется перенесение для того, чтобы это был-50 % горизонтально и вертикально.

Сейчас только договорись о том, чтобы добавить 9 div для 9 положений, сочетая различные вертикальные и горизонтальные классы и позволяя, чтобы браузер взялся renderizarlas в Вашем подходящем месте.

Я изменил немного стилей для того, чтобы он был немного чище. Результат оказался бы таким:

body{ margin:0; padding:0;}
#header{width:100%; border-bottom:red 1px solid; position:fixed; height:30px;z-index:1000;  margin-top:0;}
#wraper{width:100%;  padding-top:30px; text-align:center; }
.basic_unit{width:800px; height:1200px; border:rgba(0,0,0,1.00) solid 1px; margin:auto;}
.basic{width:200px; height:200px; background:yellow;}
.basic2{width:200px; height:200px; background:red;}
.fixed {position:fixed;}
.center_center{ display:inline-block;z-index:100;}
#container{overflow:auto; background:rgba(255,0,234,0.20); display:inline-block;}
.left { left:0; }
.right { right:0; }
.center { left:50%; transform:translate(-50%, 0); }
.top { top:0; }
.bottom { bottom:0; }
.middle { top:50%; transform:translate(0, -50%); }
.center.middle { transform:translate(-50%, -50%); }
<div id="header">
</div>

<div id="wraper">
<div id="container">

<div class="basic fixed top left"></div>
<div class="basic fixed top right"></div>
<div class="basic fixed top center"></div>
<div class="basic fixed middle left"></div>
<div class="basic fixed middle right"></div>
<div class="basic fixed middle center"></div>
<div class="basic fixed bottom left"></div>
<div class="basic fixed bottom right"></div>
<div class="basic fixed bottom center"></div>

<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
<div class="basic_unit">
</div>
  </div>
  </div>
2
ответ дан 24.11.2019, 14:43
  • 1
    Привет, спасибо за ответ но divs у них должны быть posici и # 243; n закрепи относительно экрана и отец не вытекает из ширины div, которым не решена проблема, которая точно происходит от этих определяющих факторов. – Ivan Soler 17.03.2016, 12:37
  • 2
    @IvanSoler я изменился c и # 243; я говорю немного: posici и # 243; n петлю относительно экрана получают, поместив его posici и # 243; n закрепи в div внешнюю сторону, и ширина .basic не превосходит ширину отца – Alvaro Montoro♦ 17.03.2016, 13:51
  • 3
    Ничто @AlvaroMontoro не кажется мне невозможным делать совместимым то, что ты предлагаешь с моей структурой, так как в " container" ты даешь ширину и установленную высоту wraper tambi и и # 233; n, но в моем случае ты находишься характер и # 237; sticas они зависят от контента и #233; stos. complicaci и # 243; n темы в действительности он сложен в предпосылку, из которой divs, которые я ищу posicionar, не вытекают ширины div контейнер несмотря на то, чтобы быть установленными относительно экрана. – Ivan Soler 17.03.2016, 14:06

Теги

Похожие вопросы