显示内嵌的div彼此相邻的CSS +中心，IE8

UPDATE：原来，巴特的答案是正确的。 4 * 64 + 8 * 1 = 264px宽的div来包含其他div和他们的1px边界给出我想要的效果。我修改了示例代码以包含他的答案。感谢Bart。显示内嵌的div彼此相邻的CSS +中心，IE8

我挣扎，再次用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>

来源

2009-10-23 Andrew

添加填充和余量，否则浏览器忽略的高度和宽度。

抓好试图不使用表格布局！

来源

2009-10-23 18:23:05

什么值填充的，我需要补充，实现64PX独立的高度/宽度在div中的文字？ – Andrew 2009-10-23 18:40:34

我从几个像素开始玩萤火虫中的数字。一般来说，最终宽度必须小一些，ymmv。让我知道。 – 2009-10-24 17:39:31

我试了一下，但是我最终得到的结果是DIV内容的填充量。因此，由于DIV内容的大小不同，总大小也不同。但我需要精确的64高度/宽度。 – Andrew 2009-10-25 18:35:13

将它们设置为display: inline把他们变成直列元素，不与width，height发挥很好，这都是为了块元素，其中div默认情况下其他盒模型属性。

如果你想设置的宽度和高度，以及你希望他们彼此相邻，试试这个：

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

来源

2009-10-23 18:45:27

这有效，但推动divs到屏幕的最左侧。我如何让他们保持他们的大小，彼此相邻但仍然集中在页面上？我没有结婚的div。如果他们能更好地工作，可以切换到跨度。 – Andrew 2009-10-23 18:53:58

要居中在页面上这些div，你可以在下面的CSS添加到周围的五，六，七，八的div的DIV：{宽度：256PX; margin：0 auto;} – Bart 2009-10-23 21:05:42

显示内嵌的div彼此相邻的CSS +中心，IE8

回答

相关问题