Html 使用CSS+；居中，IE8_Html_Css_Internet Explorer 8

Html 使用CSS+；居中，IE8

html css internet-explorer-8

Html 使用CSS+；居中，IE8,html,css,internet-explorer-8,Html,Css,Internet Explorer 8,更新：结果表明巴特的答案是正确的。4*64+8*1=264px宽的div包含其他div和它们的1px边框，这正是我想要的效果。我修改了示例代码以包含他的答案。谢谢你，巴特我再一次为CSS而挣扎。此示例显示了1,2,3,4的大小，我希望它们使用表。当我尝试对CSS做同样的操作时，div会收缩到内容的大小，而不是指定的高度/宽度。目标浏览器：IE8 <!doctype html> <html> <head> <style type="text/css" m

更新：结果表明巴特的答案是正确的。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>


#一、二、三、四、五、六、七、八
{
高度：64px；宽度：64px；
边框：1px纯黑；
背景颜色：浅绿色；
}
#五、六、七、八{浮动：左；}
#cont{width:264px；}
1.
2.
3.
4.
5.
6.
7.
8.

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

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

将它们设置为

display:inline

会将它们转换为内联元素，而内联元素与块元素的

width

、

height

以及其他框模型属性（默认情况下为

div

）不匹配

如果要设置它们的宽度和高度，并且希望它们彼此相邻，请尝试以下操作：

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

我需要添加哪些填充值来实现64px的高度/宽度（与div中的文本无关）？我从几个像素开始，在firebug中播放数字。通常，最终宽度必须稍微小一点，ymmv。让我知道。我试过了，但我最终得到的是在DIV的内容周围填充了大量的内容。因此，随着DIV内容大小的变化，总大小也会变化。但我需要精确的64高/宽。这是web开发人员忘记的事情之一。内容就是你开发的目的。如果内容改变了长度，那么布局也会改变。如果您确实想保持64像素的大小，请截断内容并添加“阅读更多”。记住，为内容设计。这不会改变天气，你使用的是工作正常的表，但会将div推到屏幕最左侧。我如何才能让它们保持大小，彼此相邻，但仍然在页面上居中？我没有和迪夫结婚。如果效果更好，可以切换到跨距。要使这些DIV在页面上居中，可以将以下CSS添加到围绕五、六、七和八个DIV的DIV中：{width:256px；margin:0 auto；}