如何使用 css 在 html 页面中添加 3 列？答案

【问题标题】：how can i add 3 columns in an html page using css?如何使用 css 在 html 页面中添加 3 列？
【发布时间】：2017-09-12 23:50:29
【问题描述】：

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

#navbar{width:15%}

#content{width:70%}

#right{width:15%}

这是我以前这样做的样式表：

#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%，但每次运行时都会运行此代码。主显示屏和container之间有一个空格。

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

【问题讨论】：

试试body { margin: 0; }
移除边距 .in container margin-left: 15% ;没关系
我仍然有这个错误。因此，右侧面板显示在导航栏和内容下方的一行中。

标签： html css

【解决方案1】：

这会起作用。

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

【讨论】：

【解决方案2】：

问题好像出在margin: 8px身上由于容器的可用区域是 100% - 8px，这就是为什么会有 8px 的间隙。

尝试使用body{margin:0px;}

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

标题给你中心请检查这些代码