我已经为我的网站做了一个非常基本的布局。现在，该网站可以在Chrome，Mozila和Opera中完美显示。
但是，唯一剩下的问题是IE。由于我在浏览器窗口中有两个彼此相邻的框，因此IE只是将它们折断并放在另一个框的下面，这是我绝对不希望的。
如何摆脱这种麻烦？
[注意：我尚未在Web服务器上发布我的网站。我只是在我的本地主机上运行它]
以下是我完整的代码：
.PHP：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>My site</h1>
</header>
<nav id="top_menu">
<ul>
<li>Opening Hours</li>
<li>Registration</li>
</ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<hgroup>
<header>
<h1>Title of article1</h1>
<h2>subTitle of article1</h2>
</header>
</hgroup>
<p>This is a best aricle1</p>
<footer>
<p> Written by...1</p>
</footer>
</article>
<article>
<hgroup>
<header>
<h1>Title of article2</h1>
<h2>subTitle of article2</h2>
</header>
</hgroup>
<p>This is a best aricle2</p>
<footer>
<p> Written by...2</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
Put your news
</aside>
</div>
<footer id="the_footer">
Put your footer
</footer>
</div>
</body>
</html>
.CSS：
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
/*
text-align:center;
*/
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#top_header{
background:yellow;
border:3px soild gray;
padding:20px;
}
#top_menu{
border:green;
background:gray;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid blue;
width:220px;
margin:20px 0px;
padding:30px;
background:#66CCCC;
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid green;
}
问题在于盒子的浮动和display状态
试试这个，它应该可以正常工作。.http://jsfiddle.net/4sdvk8gL/
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
/*
text-align:center;
*/
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#top_header{
background:yellow;
border:3px soild gray;
padding:20px;
}
#top_menu{
border:green;
background:gray;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;f
}
#new_div{
display:block;
display:-moz-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
border: 1px solid blue;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
margin: 20px;
padding: 20px;
float: left;
width: calc(75% - 82px);
}
#side_news{
border: 1px solid blue;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
float: left;
display: block;
width: calc(25% - 62px);
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid green;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句