如何使用CSS在HTML页面中添加3列?

本文介绍了如何使用CSS在HTML页面中添加3列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在html页面中添加3个垂直列:

I want to add 3 vertical columns in a html page:

#navbar {width:15％}

#content {width:70％}

#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>

即使边距设置为0％，我每次运行时都运行此代码.主显示器和容器之间有一个空格.

Even though the margin is set as 0%, every time I run run this code. There is a space between the main display and the container.

那么，我该如何解决这个问题?

So, how can I solve this problem?

推荐答案

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

    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%;
}

这篇关于如何使用CSS在HTML页面中添加3列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！