Как сверстать несколько div по центру ?

Question

[Andreii787]

Добрый день. Не подскажите как сделать резиновые дивы по центру. как на картинке.Один div справа в углу я сделал и div по центру сделал, как мне третий div прикрепить как на картинке ?
Вот так сделал

div по центру

.c1{
    width: 150px;
    height: 200px;
    border:2px solid green;
    background-color: green;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;   
}

div справа внизу

.c3{
    width: 130px;
    height: 80px;
    border:4px solid blue;
    background-color: gray;
    position: absolute; 
    bottom: 0; 
    right: 0;
}

Answer 1

[Юрий Лобанов]

Сложно сказать по Вашему вопросу, какая "резиновость" Вам нужна ) Можно вот так сделать, достаточно резиново? )
codepen.io/iiil/pen/rEkyK

Answer 2

[GM2mars]

Если нужен вариант без абсолютного позиционирования, то:
Родительскому блоку-контейнеру, где расположены указанные блоки, задаешь text-align: center;
А у блоков, которые нужно отцентрировать пишешь display: inline-block;
jsfiddle.net/LeqPQ

Так же свойство vertical-align: bottom|top|middle устанавливаем вертикальное выравнивание, а через margin сдвигаем позицию.

p.s. Вот не поленился сделать сделать как у вас на картинке jsfiddle.net/LeqPQ/1

Не слушайте никого, это не хак и не костыль, а совершенно валидная верстка.

Comments

[goodknight]

гы, govnokod.im

[GM2mars]

Скрытая реклама?

[goodknight]

: - >, позиционировать блоки свойством, которое предназначено для позиционирования текста, это, мягко говоря, очень плохо.

[GM2mars]

Предложите свой вариант, тогда буду знать как правильно сделать.

[Юрий Лобанов]

@goodknight Вы не правы. Вы ищи свойство display запретите.

[goodknight]

@iiil гы. дисплей православен, а то, что предложил аффтор, это тьма тьмущая и кощунство.

[Юрий Лобанов]

@goodknight да я точно также инлайн-блок предложил. Кодеры Лебедева, кстати, также используют его. Это отличный вариант для определенных целей. inline-block - это не inline, или Вы не знаете разницу?

[goodknight]

@iiil я не про инлайн и инлайн-блок говорил. А про "text align" для позиционирование блока. Я только за православное применение тегов и свойств.

[goodknight]

@iiil кстати, не поделитесь инвайтом на хабрик ?

[Юрий Лобанов]

@goodknight во-первых, я сам read only, во-вторых, ха такое Вас тут забанят.
Что касается text-align - его все время и используют исторически не для текста, а для всех инлайновых элементов, в том числе картинок, спанов и других элементов. Так что все тут православно, inline-block был придуман для совместимости блочной и встроенной модели, чтобы в т.ч. пользоваться выравниванием в строке. Вам надо немного познакомиться с версткой, в частности, понять, что вся верстка как таковая берет свою историю с первых печатных книг, и всегда именно текст определял моду. Неудивительно, что свойства выравнивания ориентируются на текст в своем названии.

[goodknight]

@iiil пусть банят))) этот сайт уже давно просто лулзы словить за 5 минут и кэжуально поговорить на родном языке. При чем тут то, к чему используется text-align. У блока нет строки. Внутри него могут быть, но он сам должен позиционироваться по-другому. Я не видел уважающих себя людей, которые бы часто использовали без нужды такой хак. Даже на том же SO не советуют так делать. Блин вообще хз, что тут обсуждать, позиционировать блоки с помощью "TEXT"-align" - это МАРАЗМ, не хочу думать об аналогиях, я за unix-way и вообще всё я пошел. А то скора зобанят.

[Юрий Лобанов]

@goodknight Вы прочитайте что я пишу. Я не про аналогии.
Я тоже не советую так делать, если не заметили - я сделал внутренние дивы без пробельного символа между ними - одна из проблем использования inline-block.
Однако для решения многих задач вполне подходит. И это не хак, не говорите ерунды.

Answer 3

[Денис Инешин]

И в чем проблема? position: absolute для дивов, отступы в процентах и все будет вполне резиновым.