Question

更新：原来Bart的回答是正确的。 4 * 64 + 8 * 1 = 264px宽div包含其他div和它们的1px边框提供了我想要的效果。我修改了我的示例代码以包含他的答案。谢谢巴特。

我再次与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>

Answer 1

添加填充和边距，否则浏览器会忽略高度和宽度。

好好尝试不使用表格进行布局！

Answer 2

将它们设置为display: inline会将它们转换为内嵌元素，这些元素与width，height和其他框模型属性无法很好地匹配适用于块元素，默认为div。

如果你想设置它们的宽度和高度，并且你想让它们彼此相邻，试试这个：

#five, #six, #seven, #eight { 
  float: left;
  height: 64px; 
  width: 64px;
  border: 1px solid black;
  background-color: lightgreen;
}

使用CSS +居中，IE8以内联方式显示内联div

2 个答案: