Question

我正在尝试将FullCalendar实现为2列布局（左列）。右侧边栏是一个浮动div，它会导致日历控件和日历本身之间出现间隙。

我该如何解决这个问题？

这是HTML：

<div id="container">
    <div id="header">
        <h1>Header</h1>
    <!-- end #header --></div>

    <div id="sidebar1">
        <h3>sidebar1 Content</h3>
        <p>The background color on this div will only show for the length of the content. If     you'd like a dividing line instead, place a border on the right side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
        <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <!-- end #sidebar1 --></div>

    <div id="mainContent">
        <div id="calendar"></div>
    <!-- end #mainContent --></div>

    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
        <p>Footer</p>
    <!-- end #footer --></div>
<!-- end #container --></div>

这是CSS：

#mainContent  {
    padding: 0px;
    border: 1px solid #0F3;
    margin-top: 0;
    margin-right: 30%;
    margin-bottom: 0;
    margin-left: 0;
} 

#sidebar1 h3 ,#sidebar1 p   {
    margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
    margin-right: 10px;
}

Answer 1

看一下css：

.fc-content {
   clear: both;
}

这就是导致它的原因。删除它似乎没有破坏任何东西，但我没有在IE中测试它。

Answer 2

尝试添加此内容，类似于@spuas answer

.fc-clear { 
    clear: none !important; 
}

日历顶部无法解释的差距？

2 个答案: