Здравствуйте!
Нужно сделать следующее. Нужно нарисовать на экране прямоугольник, размером 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 квадратов?
