Question

我一直在尝试创建一个包含内容的容器页面和一个右侧边栏。每当我将内容输入到侧边栏或内容div中的内容时，它会继续进入页脚，侧边栏有时会移动到页面的左侧。

我觉得我在某处有高度问题。我希望容器部分与内容/侧边栏占用一样大，但它似乎溢出到页脚而不是扩展容器。

以下是我的HTML的示例：

    <body>
        <div class="MainContainer">
        <div class="RightSideBar">
          Sidebar Text
        </div> 

        <div class=MainContent>
            Content Text
        </div>

        </div>
    <footer>
        Footer Text
    </footer>
</body

和CSS

body{
 width:100%;
 height:auto;
 margin-left:auto;
 margin-right:auto;
}

footer{
 height:20%;
 width:60%;
 margin-left:auto;
 margin-right:auto;
 color:white;
}
.RightSideBar{
  width:20%;
  height:auto;
  float:right;
}
.MainContent{
 width:80%;
 height: auto;  
}

Answer 1

尝试在.MainContainer

上设置overflow: hidden;

Answer 2

请勿使用float，如果您知道元素的大小，请改用display:inline-block。

HTML：

<main>
  <div class="content col">articles..</div>
  <aside class="col">sidebar..</aside>
</main>

的CSS：

main {
   font-size:0;
}
.col {
   font-size:16px;
   display:inline-block;
}
.content {
   width:80%;
}
aside {
   width:20%;
}

包含内容和侧边栏的容器

2 个答案: