Меню
Что нового?

HTML, CSS: Горизонтальная линия из квадратов

xintrea

Новичок
Здравствуйте!


Нужно сделать следующее. Нужно нарисовать на экране прямоугольник, размером 250x25pix. И в него надо засунуть 10 квадратов 25x25pix. (Каждый квадрат будет иметь уникальный id).

Вопрос. Как блин это сделать?

Я пробую такой код:

Код: 
<html>
<head>

<style type="text/css">
.lb_field {
 margin: 0;
 padding: 0;
 width: 250px;
 height: 100px;
 background: #50F050;
 color: #010101;
}

.lb_field_row {
 margin: 0;
 padding: 0;
 width: 250px;
 height: 25px;
 background: #805050;
}

.lb_cell {
 margin: 0;
 padding: 0;
 width: 25px;
 height: 25px;
 color: #505005;
 background: #108010;
}
</style>
</head>

<body>

<div id="lb_field" class="lb_field">
 <div class="lb_field_row" id="lb_field_row_0">
  <span class="lb_cell" id="lb_field_cell_0_0">+</span>
  <span class="lb_cell" id="lb_field_cell_0_1">+</span>
  <span class="lb_cell" id="lb_field_cell_0_2">+</span>
  <span class="lb_cell" id="lb_field_cell_0_3">+</span>
  <span class="lb_cell" id="lb_field_cell_0_4">+</span>
  <span class="lb_cell" id="lb_field_cell_0_5">+</span>
  <span class="lb_cell" id="lb_field_cell_0_6">+</span>
  <span class="lb_cell" id="lb_field_cell_0_7">+</span>
  <span class="lb_cell" id="lb_field_cell_0_8">+</span>
  <span class="lb_cell" id="lb_field_cell_0_9">+</span>
 </div>
</div>

</body>
</html>

В результате, квадраты 25x25 не появляются. Вместо квадратов видно одно знакоместо, занимаемое символом "+". Вот так:


http://rghost.ru/3521969/image.png

Если же тег <span> заменить на <div>, то получается такое:


http://rghost.ru/3522037/image.png

То есть, квадраты появляются, но после каждого <div> браузер автоматом ставит перевод строки.


Вопрос: Как сделать горизонтальную линию из 10 квадратов?
 

xintrea

Новичок
флоппик написал(а):
Показываю один раз: http://gorbunov.kz/trash/float.html
Нажмите для раскрытия...
О, спасибо. Я правда решил по-другому.

Для стиля lb_field добавил display: table;

Для стиля lb_field_row добавил display: table-row;

Для стиля lb_cell добавил display: table-cell;

И заработало. Главное, чтоб размер таблицы соответсвовал размеру, занимаемому строками и ячейками.
 
c0dex

c0dex

web.dev 2002-...
Команда форума
Партнер клуба
xintrea
Неправильно ты, дядя Федор бутерброд ешь. В седьмом осле работать не будет, однака.
 
Войдите или зарегистрируйтесь для ответа.
Сверху