div elements with display: inline are hidden
If i am right display:inline should display div on the same line without any line break. This is my web page where display:inline simply makes my div invisible:
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background:#293231;
}
.page1{
background:url('Main.jpg') no-repeat;
width:1024px;
height:211px;
}
.page2{
background:url('Page2.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.page3{
background:url('Page3.jpg') no-repeat;
width:1024px;
height:211px;
displa开发者_开发百科y:inline;
}
.wrapper{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I can see divs with class = page1, but page2 and page3 are invisible.
A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:
display: inline-block;
You can see a full list of options for display here
Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }
.page1{ background:url('Main.jpg') no-repeat; }
.page2 { background:url('Page2.jpg') no-repeat; }
.page3{ background:url('Page3.jpg') no-repeat; }
/* These next two lines are my changes. */
/* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
/* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论