Css DIVS不工作 [英] Css DIVS Not Working
问题描述
好的，这是我的问题我有一个2 DIVS行（它们工作正常），第二行有5 DIVS（不能正常工作）。问题是基本上我可以让它与IE或Firefox一起工作，主要问题是第二行的第五个DIV ..我希望它们全部对齐，如12345连续，当浏览器变大或变小我想要他们保持这种方式，但是发生的事情是第5个DIV要么转到下一行，要么它将超过第二行的第一个div ..帮助得到很大的赞赏...继承人我的代码
HTML
Okay Here is my Problem I Have a row with 2 DIVS(They Work Fine), and the second row with 5 DIVS (that do not work fine). The issue is Basically I can get it to work with either IE or Firefox the main issue is with the 5th DIV on the second row.. i want them to all align like 12345 in a row and when the browser gets bigger or smaller i want them to stay this way but what happens is the 5th DIV will either go to the next line or it will go over the first div on the second row.. HELP with be GREATLY Appreciated... Heres my code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<!-- saved from url=(0016)http://localhost -->
</head>
<body>
<div id="container">
<div id="table1"></div>
<div id="table2"></div>
</div>
<div id="container2">
<div id="table3">1</div>
<div id="table4">2</div>
<div id="table5">3</div>
<div id="table6">4</div>
<div id="table7">5</div>
</div>
</body>
</html> < br $>
CSS：
CSS:
<pre lang="CSS">
div {
display: block;
}
body {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
background-color: #121633;
color: red;
font-family: "Arial";
font-size: 12px;
}
#container {
width: 100%;
display: inline-block;
background-color: #404040;
}
#table1 {
width: 5%;
height: 100px;
float: left;
}
#table2 {
width: 95%;
height: 100px;
float: left;
text-align: center;
}
#container2 {
width: 100%;
display: inline-block;
color: #FFFFFF;
font-family: "Arial";
font-size: 12px;
}
#table3 {
float: left;
width: 5%;
height: 48px;
}
#table4 {
float: left;
width: 5%;
height: 48px;
}
#table5 {
float: left;
width: 50%;
height: 48px;
}
#table6 {
float: left;
width: 20%;
height: 48px;
}
#table7 {
float: left;
width: 20%;
height: 48px;
}
推荐答案
看起来你的问题出在IE7上。我用IE7-> 10，FF和Chrome进行了测试，只有7个看起来不同。
如何修复？如果您将页面分成两半，有时浏览器会抱怨您的数字加起来为100％或50％。似乎IE 7抱怨页面太紧，并且正在将div table7推到下一行，因为它太紧了。因此，我将＃table7 CSS的20％更改为19％，它似乎解决了问题并且在提到的其他浏览器中看起来正确。
It looks like your problem is with IE7. I tested with IE7->10, FF, and Chrome and only 7 looked different.
How to fix? Sometimes browsers complain when your numbers add up to 100% or 50% if you are splitting your page in half. It appears that IE 7 is complaining the page is too tight and is pushing div table7 to the next line because it is too tight. So, I changed the 20% to 19% for #table7 CSS and it seems to fix the problem and look correct in the other browsers mentioned.
#table7 {
float: left;
width: 19%;
height: 48px;
}
尝试添加
Try to add
*{margin:0; padding:0;}
在css行的顶部并检查相同的内容：）
in top of the css line and check the same :)
这篇关于Css DIVS不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
