Стили для DIV таблиц

156

LyalinDV

3 марта 2016, 08:08

572

Добрый день! Пытаюсь адаптировать свои таблицы, но столкнулся с проблемой.

Есть таблица:

<div style="width: 100%;">

<div style="width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div>

<div style="width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div>

</div>

При уменьшении экрана Ячейка2 смещается под первую, но при этом обе ячейки расположены слева. Мне необходимо, чтобы при уменьшении экрана Ячейка2 располагалась под первой, но при этом обе ячейки были выровнены по центру. Подскажите как это реализовать?

Если вместо left делать такой код:

<div style="width: 100%;">

<div style="width: 50%; float: centr; border: 0px solid black; text-align: center;">Ячейка1</div>

<div style="width: 50%; float: centr; border: 0px solid black; text-align: center;">Ячейка2</div>

</div>

Они изначально и без уменьшения экрана расположены друг под другом.

S

171

silicoid

3 марта 2016, 09:06

#1


div {
    display:table;
    width:100%
}

div > div{
    display:table-cell;
    text-align:left;
    vertical-align:top;
}

или


div {
    display:block;
    letter-spacing:-0.3em;
}

div > div{
    display:inline-block;
    letter-spacing:normal;
}

варианты почти одинаковы, но есть нюансики

в вашем варианте флоат не работает, потому, что между блоками расположен пробел, который делает общую ширину блоков >100%

поэтому надо дать для контейнера letter-spacing:-0.3em; а для ячеек - letter-spacing:normal;

и к тому-же у блоков position не выбран

Но мой вам совет. Завязывайте с сатанизмом. верстайте через инлайн-блок

времена ИЕ6 ушли безвозвратно

---------- Добавлено 03.03.2016 в 13:16 ----------

апд float: centr; - это что-то новое

Google ответил на несколько Как сделать сайт удобным 13 Excel-граблей, на которые

LD

156

LyalinDV

3 марта 2016, 09:33

#2

silicoid:


div {

    display:table;

    width:100%

}



div > div{

    display:table-cell;

    text-align:left;

    vertical-align:top;

}

или


div {

    display:block;

    letter-spacing:-0.3em;

}



div > div{

    display:inline-block;

    letter-spacing:normal;

}

варианты почти одинаковы, но есть нюансики
в вашем варианте флоат не работает, потому, что между блоками расположен пробел, который делает общую ширину блоков >100%
поэтому надо дать для контейнера letter-spacing:-0.3em; а для ячеек - letter-spacing:normal;
и к тому-же у блоков position не выбран

Но мой вам совет. Завязывайте с сатанизмом. верстайте через инлайн-блок
времена ИЕ6 ушли безвозвратно

---------- Добавлено 03.03.2016 в 13:16 ----------

апд float: centr; - это что-то новое

и как это сделать?

мне необходима таблица из 5 ячеек, которая зафиксирована по центру таблицы. При уменьшении экрана ячейки должны спускать вниз, но закреплены по центру..

---------- Добавлено 03.03.2016 в 13:37 ----------

Вот пример: http://mirkosmosa.ru/lunar-calendar/haircut/2016

Таблицы Google оснащены новыми 13 Excel-граблей, на которые До конца года в

Z0

827

ziliboba0213

3 марта 2016, 09:48

#3

По ссылке у них:

Внешний блок - text-align: center;

Внутренние - display :inline-block;

334

TF-Studio

3 марта 2016, 09:55

#4

а использовать для таблиц табличную верстку?

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).

LD

156

LyalinDV

3 марта 2016, 09:56

#5

ziliboba0213:
По ссылке у них:
Внешний блок - text-align: center;
Внутренние - display :inline-block;

а можно пожалуйста готовый код?

Для чайников так сказать...

Z0

827

ziliboba0213

3 марта 2016, 10:00

#6

LyalinDV:
а можно пожалуйста готовый код?

Для чайников так сказать...


<div style="display: block; text-align: center">

<div style="width: 200px; display: inline-block">Ячейка1</div>

<div style="width: 200px; display: inline-block">Ячейка2</div>

</div>

LD

156

LyalinDV

3 марта 2016, 10:06

#7

ziliboba0213:


<div style="display: block; text-align: center">

<div style="width: 200px; display: inline-block">Ячейка1</div>

<div style="width: 200px; display: inline-block">Ячейка2</div>

</div>

Спасибо! А bgcolor можно применить для заливки ячейки в черный цвет?

Z0

827

ziliboba0213

3 марта 2016, 10:07

#8

LyalinDV:
Спасибо! А bgcolor можно применить для заливки ячейки в черный цвет?

style="background-color: #000"

1

LD

156

LyalinDV

3 марта 2016, 10:10

#9

ziliboba0213:

style="background-color: #000"

Спасибо еще раз!!!!

---------- Добавлено 03.03.2016 в 15:08 ----------

А может есть способ выравнять содержимое ячейки по вертикали?

Z0

827

ziliboba0213

3 марта 2016, 11:19

#10

LyalinDV:
Спасибо еще раз!!!!

---------- Добавлено 03.03.2016 в 15:08 ----------

А может есть способ выравнять содержимое ячейки по вертикали?


<div style="display: block; text-align: center; width: 100%">
<div style="width: 200px; display: inline-block; height: 100px; background: #e5e5e5; height:200px; line-height:200px;">Ячейка1</div>
<div style="width: 200px; display: inline-block; height: 100px; background: #c5c5c5; height:200px; line-height:200px;">Ячейка2</div>
</div>

Учитесь пользоваться поиском по форуму :)

Дзен реализовал для авторов возможность вывода денег через СПБ

Маркетинг для шоколадной фабрики. На 34% выше средний чек