使用 CSS + 居中，IE8 并排显示 div答案

【问题标题】：Display divs inline next to each other with CSS + centered, IE8使用 CSS + 居中，IE8 并排显示 div
【发布时间】：2009-10-23 18:20:40
【问题描述】：

更新： 事实证明，巴特的答案是正确的。 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>

【问题讨论】：

标签： html css internet-explorer-8

【解决方案1】：

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

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

【讨论】：

我需要添加哪些填充值才能实现 64 像素的高度/宽度，而与 div 中的文本无关？
我从几个像素开始，然后在 firebug 中使用数字。通常，最终宽度必须小一点，ymmv。告诉我。
我试过了，但我最终得到的是 DIV 内容周围的大量填充。因此，随着 DIV 内容的大小不同，总大小也不同。但我需要正好 64 的高度/宽度。
这是 Web 开发人员忘记的事情之一。内容就是你开发的目的。如果内容改变长度，那么布局也会改变。如果您真的想保持 64 像素大小，请截断内容并添加阅读更多内容。请记住，为内容设计。这不会改变天气或者你不使用表格

【解决方案2】：

将它们设置为 display: inline 会将它们变成内联元素，它们不能很好地与 width、height 和其他用于 block 的盒子模型属性配合使用 元素，默认情况下div 是。

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

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

【讨论】：

这可行，但会将 div 推到屏幕的最左侧。我怎样才能让它们保持大小，彼此相邻但仍位于页面中心？我没有嫁给divs。如果它们能更好地工作，可以切换到跨度。
要使这些 div 在页面上居中，您可以将以下 CSS 添加到围绕五个、六个、七个和八个 div 的 DIV：{width:256px;边距：0 自动；}