Отображение элементов div рядом друг с другом с помощью CSS + по центру, IE8 - PullRequest
0 голосов
/ 23 октября 2009

ОБНОВЛЕНИЕ: Оказывается, что ответ Барта правильный. 4 * 64 + 8 * 1 = элемент шириной 264 пикселя, содержащий другие элементы div и границы в 1 пиксель, дает именно тот эффект, который я хотел. Я изменил мой пример кода, чтобы содержать его ответ. Спасибо, Барт.

Я снова борюсь с CSS. Этот образец показывает 1,2,3,4 в размере, который я хочу, чтобы они использовали таблицу. Когда я пытаюсь сделать то же самое с CSS, div падает до размера содержимого, а не до указанной высоты / ширины. Целевой браузер: IE8

<!doctype html>
<html>
<head>
<style type="text/css" media="screen"> 
#one, #two, #three, #four, #five, #six, #seven, #eight 
{
    height: 64px; width: 64px;
    border: 1px solid black;
    background-color: lightgreen;
}
#five, #six, #seven, #eight { float:left; }
#cont {width:264px;}
</style>
</head>
<body>
<center>

<table><tr>
<td><div id="one">1</div></td>
<td><div id="two">2</div></td>
<td><div id="three">3</div></td>
<td><div id="four">4</div></td>
</tr></table>

<div id="cont">
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
<div id="eight">8</div>
</div>

</center>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 23 октября 2009

Добавьте отступы и поля, иначе браузер игнорирует высоту и ширину.

Хорошая работа, пытаясь не использовать таблицы для разметки!

0 голосов
/ 23 октября 2009

Установка их на display: inline превращает их в встроенные элементы, которые плохо работают с width, height и другими свойствами модели блока, которые предназначены для блока элементов, которые div по умолчанию.

Если вы хотите установить их ширину и высоту, и вы хотите, чтобы они были рядом друг с другом, попробуйте это:

#five, #six, #seven, #eight { 
  float: left;
  height: 64px; 
  width: 64px;
  border: 1px solid black;
  background-color: lightgreen;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...