我正在用一个简单的流体网格进行一些实验,只有侧边栏和主要区域。当我尝试在主区域内的div中放置一些边距时,边距不能正常工作,但在侧边栏中它可以正常工作。这是Jsfiddle:http://jsfiddle.net/swayziak/vVJeV/
HTML:
<section class="sidebar">
<div class="test"> bla bla bla bla bla ba balalalalal </div>
</section>
<section class="mainarea">
<div class="test"> bla bla bla bla bla ba balalalalal </div>
</section>
CSS
.sidebar {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 25%;
height: 100%;
border-right: 1px solid #E3E3E3;
background: #FFF;
}
.mainarea {
float: right;
z-index: 100;
top: 0;
left: 0;
width: 75%;
height: 100%;
}
.test {
margin-left: 24px;
}
问题可能与.sidebar和.mainarea CSS的某些部分有关,但我不知道哪一个。
感谢。
答案 0 :(得分:4)
以下是您的回答.. Example here.
您的问题是边栏占据了25%,而主要区域占75%..这通常会有效,但是,您的border-right
为1 px ..因此,总计加起来为101 %..
以下是我所做的更改:
.sidebar {
float:left; /* Added this in */
width:24%; /* Changed to 25 to 24 */
}
如果您需要更多帮助,或者您还有其他问题,请与我们联系。