如何消除窗格之间的差距 [英] How to eliminate the Gap between Panes
本文介绍了如何消除窗格之间的差距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个带有css的HTML模板。但我无法消除CenterPane和Header以及centerPane1和centerPane2之间的差距。我希望有一位专家为解决方案提供帮助。提前致谢。
I created a HTML template w/ css. But I could not eliminate the gaps between CenterPane and Header, and centerPane1 and centerPane2. I wish some expert to help for the solution. Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8" />
<title>CSS Testing</title>
<style>
body {
background-color: #FFF;
}
#master {
width:1000px;
padding-top:2px;
padding-bottom:2px;
background-color:#FFF;
margin-left:auto;
margin-right:auto;
}
#header {
background-color: #006;
color: #FFF;
padding-left: 5px;
height: 30px;
line-height: 30px; /*this is what you must define */
vertical-align: middle;
}
#bottomPane {
background-color: #E000FF;;
color: #FFF;
padding: 20px;
height: 120px;
}
#leftPane {
border-width: 2px;
border-style: dotted;
border-color: #4682B4;
background-color: #E0FFFF;
width: 200px;
height: 400px;
text-align: center;
float: left;
margin-left:0px;
margin-top: 0px;
}
#leftPane h3 {
color: purple;
}
#rightPane {
border-width: 2px;
border-style: dotted;
border-color: #4682B4;
background-color: #E0FFFF;
width: 200px;
text-align: center;
float: right;
margin-left:10px;
margin-top: 0px;
}
#centerPane {
padding:0;
border-width: 2px;
background-color: #FAF0E6;
height:400px;
margin-top: 0px;
}
#centerPane1 {
background-color: #FA0FE6;
margin-left: 210px;
margin-right: 210px;
height:200px;
margin-top: 0px;
}
#centerPane2 {
background-color: #AFF0E6;
margin-left: 210px;
margin-right: 210px;
height:200px;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="master">
<div id="header"><h2>This is the Header</h2>
</div>
<div id="leftPane">
<h3>Left Pane</h3>
<p>
<img src="Images/123.JPG" style="width: 50%; height: 50%"/>
</p>
<p>Here I am.</p>
</div>
<div id="rightPane">
<h3>Right Pane</h3>
<p>
<img src="Images/123.JPG" alt="Smiley face" style="width: 50%; height: 50%"/>
</p>
<p>Here I am.</p>
</div>
<div id="centerPane">
<div id="centerPane1">
<h3>TThis is Center Pane Upper Session</h3>
<p>1 Getting Started 2 Selectors 3 Events 4 Effects 5 Query Animation 6 CSS 7 HTML 8 Traversing 9 Variables</p>
<p>1 Getting Started 2 Selectors 3 Events 4 Effects 5 Query Animation 6 CSS 7 HTML 8 Traversing 9 Variables</p>
</div>
<div id="centerPane2">
<h3>This is Center Pane Lower Session</h3>
<p>1 Getting Started 2 Selectors 3 Events 4 Effects 5 Query Animation 6 CSS 7 HTML 8 Traversing 9 Variables</p>
<p>1 Getting Started 2 Selectors 3 Events 4 Effects 5 Query Animation 6 CSS 7 HTML 8 Traversing 9 Variables</p>
</div>
</div>
<div id="bottomPane"><h2>This is the Bottom Pane</h2>
<p>1 Getting Started 2 Selectors 3 Events 4 Effects 5 Query Animation 6 CSS 7 HTML 8 Traversing 9 Variables</p>
</div>
</div>
</body>
</html>
推荐答案
您可以通过拟合margin-left来修复它：210px;和保证金权利：210px;在你的CSS中。但是，真正的问题是你做错了布局...
在这里阅读： http://www.w3schools.com/html/html_layout.asp [ ^ ]
也许可以使用： http://builder.yaml.de/ [ ^ ]
You may fix it by fitting margin-left: 210px; and margin-right: 210px; in your CSS. But, the real problem is that you are doing the layout wrong...
Read here:http://www.w3schools.com/html/html_layout.asp[^]
And maybe use this:http://builder.yaml.de/[^]
以不同的方式尝试并得到解决。
Tried in different ways and got solved.
这篇关于如何消除窗格之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
