如何使用CSS在html頁面中添加3列？

Question

我想在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之間有一個空間。

那么，我該如何解決這個問題呢？

Answer 1

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

Answer 2

問題似乎是margin: 8px上margin: 8px由於容器的可用面積是100％ - 8px，這就是為什么有8px的差距。

嘗試使用body{margin:0px;}

希望這可以幫助。

Answer 3

這會奏效。

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

如何使用CSS在html頁面中添加3列？

問題描述

3 個解決方案

解決方案1
1 已采納 2017-04-17 11:13:56

解決方案2
1 2017-04-17 11:20:50

解決方案3
1 2017-04-17 11:26:36

如何使用CSS在html頁面中添加3列？

問題描述

3 個解決方案

解決方案1 1 已采納 2017-04-17 11:13:56

解決方案2 1 2017-04-17 11:20:50

解決方案3 1 2017-04-17 11:26:36

解決方案1
1 已采納 2017-04-17 11:13:56

解決方案2
1 2017-04-17 11:20:50

解決方案3
1 2017-04-17 11:26:36