div中的边距不能正常工作

时间:2013-08-28 23:04:48

标签: html css html5 css3

我正在用一个简单的流体网格进行一些实验,只有侧边栏和主要区域。当我尝试在主区域内的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的某些部分有关,但我不知道哪一个。

感谢。

1 个答案:

答案 0 :(得分:4)

以下是您的回答.. Example here.

您的问题是边栏占据了25%,而主要区域占75%..这通常会有效,但是,您的border-right为1 px ..因此,总计加起来为101 %..

以下是我所做的更改:

.sidebar {
    float:left; /* Added this in */
    width:24%; /* Changed to 25 to 24 */
}

如果您需要更多帮助,或者您还有其他问题,请与我们联系。