CSS: создание определенного макета с использованием начальной загрузки

Я пытаюсь создать определенный формат, используя самозагрузки:CSS: создание определенного макета с использованием начальной загрузки

enter image description here

Но не в состоянии достичь 2 основных принципов в моем макете:

в первая строка, div 2 должна быть «прикреплена» к нижней части ее столбца (ретранслируется по высоте div1).
во втором ряду, у меня есть 3 дивы я хочу, чтобы выровнять по центру (при использовании начальной загрузки системы сетки!)

редактирования: относительно 2-й ряд: я попытался с помощью 3 столбцов позволяет сказать, 3- col для каждого div (так как я хочу, чтобы маржа справа и слева), но я остаюсь со смещением еще 3, которые я не могу разделить на равные. поэтому я решил изменить его на Col-4 с маржой контейнером, что мое решение ему:

<div class="container" style="padding: 0 80px;"> 
<div class="row"> 
    <div class="col-xs-4"> 
     <div style="border:solid 1px black;">Div1</div> 
    </div> 
    <div class="col-xs-4"> 
     <div style="border:solid 1px black;">Div2</div> 
    </div> 
    <div class="col-xs-4"> 
     <div style="border:solid 1px black;">Div3</div> 
    </div> 
</div> 
</div>

http://jsfiddle.net/tomico/y7xesq6v/

Надежда кто-нибудь может объяснить, как я могу справиться с этим 2 вопроса

источник

2014-10-25 Popokoko

2. Используйте традиционный метод обертки, центр, с маржинальным авто, и использовать подвесную систему внутри него, так что каждый DIV будет 4 столбцов в ширине (из 12). В качестве альтернативы вы можете использовать класс смещения. –

1. Уравнивайте столбцы с помощью различных методов. (Google). Затем вы можете использовать абсолютную позицию по минимальной ширине, чтобы получить div2 внизу. 2. Создайте еще одну оболочку (например, @MatthewRath). Таким образом, вы можете сделать обертку вокруг .row, затем сделайте эту обертку на 80%, затем центрируйте ее с помощью auto auto. – Christina

ли это хватает?

.div1{position:relative;margin-top:20px;float:left;} 
.div2{position:absolute;float:left;right:0px;top:40px;}

Что касается 3 сНа подряда, я бы обернуть эти три с другой DIV, к центру так, что один DIV, содержащий три других дивов.

// Classes 
.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

// Usage as mixins 
.element { 
    .center-block(); 
}

от: Bootstrap Source

источник

2014-10-25 10:39:44 ImAtWar

Я не вижу, как ваше решение связано с системой загрузочной сетки вообще (точнее ваше решение 2-й строки) – Popokoko

Второй блок скопирован с веб-сайта, первый блок является обычным css – ImAtWar

Вы могли бы просто использовать маржинальный-топ с% для .div2

 .div2 {margin-top:50%}

Для вашего второго вопроса, что было сказано выше, будет работать, здесь как код должен выглядеть:

<div class="row"> 
        <div class="wrap"> 
<div class="col-xs-4"> 
    <div style="border:solid 1px black;">Div1</div> 
</div> 
<div class="col-xs-4"> 
    <div style="border:solid 1px black;">Div2</div> 
</div> 
<div class="col-xs-4"> 
    <div style="border:solid 1px black;">Div3</div> 
</div> 
    </div>

затем добавить CSS для обертки

 .wrap {width:50% ; margin:0 auto } //or 800px or whatever

источник

2014-12-19 13:32:38 maioman

CSS: создание определенного макета с использованием начальной загрузки

ответ

Смежные вопросы