如何强制IE在浏览器窗口中将两个div框彼此相邻放置？
[英]How to force IE to place two div boxes next to each other in it's browser window?
问题描述
I have done a very basic layout for my website. 
我已经为我的网站做了一个非常基本的布局。 Now the site gets displayed perfect in Chrome, Mozila and Opera as it should be. 现在，该网站可以在Chrome，Mozila和Opera中完美显示。
But only remaining problem is with IE. 但是，唯一剩下的问题是IE。 Since I have two boxes which sits next to each other in my browser window, the IE just breaks them and place one below another, what I definitely don't want. 由于我在浏览器窗口中有两个彼此相邻的框，因此IE只是将它们折断并放在另一个框的下面，这是我绝对不希望的。
How to get rid of this trouble? 如何摆脱这种麻烦？
[NOTE: I haven't published my site in webserver yet. [注意：我尚未在Web服务器上发布我的网站。 I am just running it in my localhost] 我只是在我的本地主机上运行它]
The following is my complete code: 以下是我的完整代码：
.PHP: .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: .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;
}
1 个解决方案
解决方案1
0 已采纳 2014-10-31 01:17:23
The issue is with the float of the boxes and the display status 问题在于盒子的浮动和display状态
Try this, it should work fine.. http://jsfiddle.net/4sdvk8gL/ 试试这个，它应该可以正常工作。.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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.