在下面的代码中,我有一个简单的页面设置,但是只要我向 div
添加内容与类 page
整个主页div
向下移动?
尝试添加 <h1>hello</h1>
到 div
与类 page
.
有什么问题,div 应该保留在那里并且只是 <h1>hello</h1>
应该加上!
代码:https://jsfiddle.net/5sx0sj2q/
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 293px;
background-color: white;
height: 500px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-left: 2px;
height: 2000px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: #031003;
}
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
最佳答案
是的,有一个技巧:
.mainpage{
vertical-align : top; // Add this
}
此外,更改 H1 显示属性:
h1{
display : inline-block;
}
所有元素都保持在它们应该在的位置。 CSS 的乐趣。
关于javascript - 将内容添加到 div 会导致它移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45377293/