Question

因此我在门户网站上工作，我发现了一个可以放入我的网页的日历。现在，css已设置好，因此第一个div的属性为“ left：250px”，然后为“ width：200px”，然后我的第二个div设置为“ left：450”。问题是当我关闭侧面导航栏时，div保持静止。我希望他们反应灵敏，并在导航栏曾经所在的区域上滑动，但我还不知道该怎么做。我试过使用，但效果似乎不太好。下面是我遇到的问题的图片，你们看看

之前：

之后：

这是我的代码，包括css和html。许多html，js和css已被忽略，但是我认为我链接的代码是问题出在哪里。如果您认为问题可能在其他地方，请告诉我，我可以链接它。感谢您的帮助！！

#lnb {
  position: absolute;
  left: 250px;
  width: 200px;
  top: 49px;
  bottom: 0;
  border-right: 1px solid #d5d5d5;
  padding: 14px 10px;
  background: #fafafa;
}

#right {
  position: absolute;
  left: 450px;
  top: 49px;
  right: 0;
  bottom: 0;
}

<div id="lnb">
  <div class="lnb-new-schedule">
    <button id="btn-new-schedule" type="button" class="btn btn-secondary 
         btn-block " data-toggle="modal">
            New schedule</button>
  </div>
  <div id="lnb-calendars" class="lnb-calendars">
    <div>
      <div class="lnb-calendars-item">
        <label>
                    <input class="tui-full-calendar-checkbox-square" 
                     type="checkbox" value="all" checked>
                    <span></span>
                    <strong>View all</strong>
                </label>
      </div>
    </div>
    <div id="calendarList" class="lnb-calendars-d1">
    </div>
  </div>
  <div class="lnb-footer">
    © Noblis ESI
  </div>
</div>

<div id="right">
  <div id="menu">
    <span class="dropdown">
            <button id="dropdownMenu-calendarType" class="btn btn-default 
             btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="true">
                <i id="calendarTypeIcon" class="calendar-icon ic_view_month" 
                 style="margin-right: 4px;"></i>
                <span id="calendarTypeName">Dropdown</span>&nbsp;
    <i class="calendar-icon tui-full-calendar-dropdown-arrow"> 
                </i>
    </button>
    <ul class="dropdown-menu" role="menu" aria- labelledby="dropdownMenu-calendarType">
      <li role="presentation">
        <a class="dropdown-menu-title" role="menuitem" data- action="toggle-daily">
          <i class="calendar-icon ic_view_day"></i>Daily
        </a>
      </li>
      <li role="presentation">
        <a class="dropdown-menu-title" role="menuitem" data- action="toggle-weekly">
          <i class="calendar-icon ic_view_week"></i>Weekly
        </a>
      </li>
      <li role="presentation">
        <a class="dropdown-menu-title" role="menuitem" data- action="toggle-monthly">
          <i class="calendar-icon ic_view_month"></i>Month
        </a>
      </li>
      <li role="presentation">
        <a class="dropdown-menu-title" role="menuitem" data- action="toggle-weeks2">
          <i class="calendar-icon ic_view_week"></i>2 weeks
        </a>
      </li>
      <li role="presentation">
        <a class="dropdown-menu-title" role="menuitem" data- action="toggle-weeks3">
          <i class="calendar-icon ic_view_week"></i>3 weeks
        </a>
      </li>
      <li role="presentation" class="dropdown-divider"></li>
      <li role="presentation">
        <a role="menuitem" data-action="toggle-workweek">
          <input type="checkbox" class="tui-full-calendar- 
                         checkbox-square" value="toggle-workweek" checked>
          <span class="checkbox-title"></span>Show weekends
        </a>
      </li>
      <li role="presentation">
        <a role="menuitem" data-action="toggle-start-day-1">
          <input type="checkbox" class="tui-full-calendar- 
                         checkbox-square" value="toggle-start-day-1">
          <span class="checkbox-title"></span>Start Week on Monday
        </a>
      </li>
      <li role="presentation">
        <a role="menuitem" data-action="toggle-narrow-weekend">
          <input type="checkbox" class="tui-full-calendar- 
                          checkbox-square" value="toggle-narrow-weekend">
          <span class="checkbox-title"></span>Narrower than weekdays
        </a>
      </li>
    </ul>
    </span>
    <span id="menu-navi">
            <button type="button" class="btn btn-default btn-sm move-today" 
             data-action="move-today">Today</button>
            <button type="button" class="btn btn-default btn-sm move-day" 
             data-action="move-prev">
                <i class="calendar-icon ic-arrow-line-left" data- 
                 action="move-prev"></i>
            </button>
            <button type="button" class="btn btn-default btn-sm move-day" 
                 data-action="move-next">
                <i class="calendar-icon ic-arrow-line-right" data- 
                 action="move-next"></i>
            </button>
        </span>
    <span id="renderRange" class="render-range"></span>
  </div>
  <div id="calendar"></div>
</div>

Answer 1

#lnb {
 position: absolute;
 left: 250px;
 width: 200px;
 top: 49px;  
 bottom: 0;
 border-right: 1px solid #d5d5d5;
 padding: 14px 10px;
 background: #fafafa;
}

#right {
 position: absolute;
 left: 450px;
 top: 49px;
 right: 0;
 bottom: 0;
}

这是在CSS中定义逻辑的方式：

Nav bar's left padding + Nav bar's width = Table's left padding

由于表格的位置设置为绝对，因此即使导航栏缩短了表格的位置，它也仍然停留在该位置。

我不确定是否可以解决此问题，但是您可以尝试以下两种方法：

将表格的位置设置为相对。这样，它将始终位于其先前同级旁边。还要将桌子的宽度设置为100％
如果将表的位置设置为相对会破坏页面上元素的顺序，则使用JavaScript来检测导航栏的缩短，并向表中添加一个类名，以将其left属性更改为0px并将宽度更改为100％。如table.nav-shortened {left：0;宽度：100％}

导航栏关闭时，如何使响应式Div变大

1 个答案: