0
我有以下頁面佈局，當我加div與card類到div與類page整個div下移。將內容添加到div讓它向下移動？
如果我刪除div與card類然後一切都會恢復正常。
有什麼問題並解決這個問題？
代碼：https://jsfiddle.net/5t0ybLn2/
/*******************page layout**************************/
.container {
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer {
width: 250PX;
height: 6000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer {
position: relative;
width: 100%;
height: 100%;
}
.sidebar {
width: 243px;
background-color: white;
height: 500px;
top: 1px;
position: absolute;
}
.mainpage {
width: calc(100% - 250px);
padding: 5px;
padding-left: 2px;
height: 6000px;
display: inline-block;
box-sizing: border-box;
}
.page {
width: 100%;
height: 100%;
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
align-content: flex-start;
}
.footer {
height: 500px;
width: 100%;
margin: 0 auto;
background-color: #031003;
}
/***************end of pagelayout******************/
.card {
width: 250px;
/*height: 400px;*/
align-self: flex-start;
margin: 10px;
display: inline-block;
}
.image {
width: 200px;
margin: 0 auto;
height: 250px;
}
.image img {
width: 100%;
height: 100%;
}<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div>
<!--
-->
<div class="mainpage">
<div class="page">
<div class="card">
<div class="image">
<img src="http://winsupersite.com/site-files/winsupersite.com/files/archive/winsupersite.com/content/content/143119/pr8.jpg">
</div>
<div class="info">
<span>This is name of book</span>
<span>this is author</span>
<span>this is price</span>
<span>this is rating</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
https://stackoverflow.com/questions/14854725/div-moves-when-的可能的複製i-put-text-in-it – Ivan
[DIV在我將文本放入它時移動]的可能重複（https://stackoverflow.com/questions/14854725/div-moves-when-i-put-text -in-it） – Ivan