如何使用CSS在html页面中添加3列？
[英]how can i add 3 columns in an html page using css?
问题描述
I want to add 3 vertical columns in a html page: 
我想在html页面中添加3个垂直列：
#navbar {width:15%} #navbar {width:15%}
#content {width:70%} #content {width:70%}
#right {width:15%} #right {width:15%}
This is the stylesheet that I used to do so: 这是我过去常用的样式表：
#container { position: fixed; float: none; overflow: visible; height: auto; width: 100%; border: none; margin-left: 0%; margin-right: 0%; padding-left: 0%; padding-right: 0%; } #navbar { float: left; display: block; position: relative; text-align: justify; width: 15%; background: black; } #content { float: none; display: block; position: static; background-size: 100%; width: 75%; margin-left: 15%; right: 10%; bottom: 0; padding: 0; } #right { float: right; display: block; position: static; text-align: justify; width: 10%; background: black; left: 85%; } .page { position: fixed; margin-left: 0%; margin-right: 0%; padding-left: 0%; padding-right: 0%; }
<div class="page"> <div id="container"> <div id="navbar"> navbar </div> <div id="content"> content </div> <div id="right"> <form action="SessionDestroy" method="POST"> right panel </form> </div> </div> </div>
Even though the margin is set as 0%, every time I run run this code. 即使边距设置为0％，每次运行时都运行此代码。 There is a space between the main display and the container . 主显示器和container之间有一个空间。
So, how can I solve this problem? 那么，我该如何解决这个问题呢？
3 个解决方案
解决方案1
1 已采纳 2017-04-17 11:13:56
HTML HTML
<body>
<div class="page">
<div id = "container">
<div id = "navbar">
navbar
</div>
<div id = "content">
content
</div>
<div id = "right">
<form action="SessionDestroy" method="POST">
right panel
</form>
</div>
</div>
</div>
</body>
CSS CSS
body{margin:0px;}
#container{
position: fixed;
float:none;
overflow: visible;
height: auto;
width: 100%;
border: none;
margin-left: 0%;
margin-right: 0%;
padding-left: 0%;
padding-right: 0%;
}
#navbar{
float: left;
display:block;
position:relative;
text-align: justify;
width: 15%;
background: black;
}
#content{
float: left;
display: block;
position: static;
background-size:100%;
width: 70%;
right: 10%;
bottom: 0;
padding: 0;
text-align:center
}
#right{
float: right;
display:block;
position: static;
text-align: justify;
width:10%;
background: black;
left: 85%;
}
.page{
position: fixed;
margin-left: 0%;
margin-right: 0%;
padding-left: 0%;
padding-right: 0%;
}
解决方案2
1 2017-04-17 11:20:50
The problem seems to be margin: 8px on the body Due to which the available area for the container is 100% - 8px, which is why there is a gap of 8px. 问题似乎是margin: 8px上margin: 8px由于容器的可用面积是100％ - 8px，这就是为什么有8px的差距。
Try using body{margin:0px;} 尝试使用body{margin:0px;}
Hope this helps. 希望这可以帮助。
解决方案3
1 2017-04-17 11:26:36
This will work. 这会奏效。
#content {
/*float: none;*/
display: block;
float: left; /* Add this line */
position: static;
background-size: 100%;
width: 75%;
/*margin-left: 15%;*/
right: 10%;
bottom: 0;
padding: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.