Display divs inline next to each other with CSS + centered, IE8
UPDATE: Turns out that Bart's answer is the correct one. 4*64+8*1 = 264px wide div to contain the other divs and their 1px borders gives exactly the effect I wanted. I modified my sample code to contain his answer. Thanks Bart.
I'm struggling, again, with CSS. This sample开发者_开发技巧 shows 1,2,3,4 at the size I want them using a table. When I try to do the same with CSS the div collapses to the size of the content rather than then height/width specified. Target browser: 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>
Add padding and margin, otherwise the browser ignores the height and width.
Good job trying to not use tables for layout!
Setting them to display: inline turns them into inline elements, which don't play nicely with width, height, and other box model properties that are meant for block elements, which the div is by default.
If you want to set their widths and heights, and you want them next to each other, try this:
#five, #six, #seven, #eight {
float: left;
height: 64px;
width: 64px;
border: 1px solid black;
background-color: lightgreen;
}
加载中,请稍侯......
精彩评论