Question

我正在创建一个包含任务/事件的日历。当我向表行添加更多事件时，我希望该行能够自动重新调整大小以适应内容，但事实并非如此。相反，内容溢出了行。

如果我删除了我的＆＃34; events-wrapper＆＃34; div，我可以解决这个问题，但我需要将我的事件包装在这个div中，这样我就可以将它们放在行中，这样它们就不会与日期重叠，因为添加了更多。

以下是代码。

HTML

<tr class="week">
    <td><div class="date">20</div></td>
    <td><div class="date">21</div></td>
    <td><div class="date">22</div></td>
    <td>
      <div class="date">23</div>
      <div class="events-wrapper">
          <div class="event">
            <span class="fa fa-check-square-o"></span>
            <p class="event-name">Test Event</p>
          </div>
          <div class="event">
            <span class="fa fa-check-square-o"></span>
            <p class="event-name">Test Event</p>
          </div>
      </div>
   </td>
</tr>

CSS

.week td{
  text-align: right;
  position: relative;
  font-size: 14px;
  padding: 2px 5px;
  width: 14.28%;
}
.week .date{
  position: absolute;
  top: 4px;
  right: 5px;
}
.events-wrapper{
  position:absolute;
  top:20px;
}
.event{
  width: 95%;
  height: 20px;
  border: 1px solid blue;
  background-color: lightblue;
  display: inline-block;
  top: 5px;
  position:relative;
  margin-bottom: 5px;
  padding-left: 5px;
  text-align: left;
}

.event .event-name{
  display:inline;
  font-weight:bold;
}

有关如何解决此问题的任何建议吗？

Answer 1

如果我找到了你您使用绝对位置代码，因此元素不会有任何大小。你的td项目无法获得2个绝对div的大小，所以我改变了代码并给你小提琴：

https://jsfiddle.net/1tt63h85/

的变化：

.event{
position: static;
}

.week .date{
  position: static;
}

Answer 2

欢迎使用StackOverflow！

主要交易：不要这样做。

这里发生的事情有很多基本问题。马上，我强烈建议有一些可以轻松写入数据的东西。编辑标记将是一种向日历添加数据的可怕方式，并且可能会出现许多意外/不良结果。

无论如何，我不得不花费几分钟的时间来破解我认为会向你展示你想要努力的东西。我为你做了两个例子：一个简单的日历，其中的日期是垂直运行的（我的假设是你的目标来自这个例子）和另一个更强大的日历（Guy Ytzhak之前回答并假设你希望日期运行横跨屏幕）

这两个日历都没有以任何方式完成;他们只是工作的例子（我的风格可怕）向你展示我如何构建这样一个虚弱的系统，如果我被迫以你现在的方式去做它。

http://codepen.io/anon/pen/ZObOaR - 简单垂直日期示例 http://codepen.io/anon/pen/oLjLoK - 强大的水平日期示例

一些问题

您的布局和展示位置的原始问题确实来自您的表格结构。你对纠正造型的尝试也进一步混淆了这个问题：

<tr class="week"> <!-- This is a row -->
<td><div class="date">20</div></td> <!-- (1st 'td') First Item in the row -->
<td><div class="date">21</div></td> <!-- (2nd 'td') Sits to the right of the 1st 'td'-->
<td><div class="date">22</div></td> <!-- (3rd 'td') Sits to the right of the 2nd 'td' -->
  <td> <!-- (4th 'td') Sits to the right of the 3rd item -->
    <div class="date">23</div>
    <div class="events-wrapper">
      <div class="event">
        <span class="fa fa-check-square-o"></span>
        <p class="event-name">Test Event</p>
      </div>
      <div class="event">
        <span class="fa fa-check-square-o"></span>
        <p class="event-name">Test Event</p>
      </div>
    </div>
  </td>
</tr> <!-- (Still the 4th 'td') Sits to the right of the 3rd item -->

核心表结构问题如上所示。（假设没有其他代码影响您所提供的位置和布局）

发生了什么：

表的工作方式（非常粗略和基本的意义，重点放在<table>，<tr>和<td>而不用担心其他部分）是：

建立一个......好吧，一张桌子。（<table>标签） - 将此视为包含框。
在所述表格中建立一行（<tr>标记）。
在所述行中建立任意数量的表格单元格（<td>标记）。
重复步骤2和3，直到不再有<tr>和<td>个标签

它应该如何工作（大多数情况下）。但是，您的代码会尝试强制一行（<tr>）标记在列中显示其包含的单元格（<td>），而不是一行，而我是看到你试图通过绝对定位来做到这一点。这不是一件好事。

重点是：

用新的事件，日期等来维持这个事情将是一个彻底的痛苦，并且每次编辑需要花费大量的时间。

日历旨在快速轻松地提供可以轻松更改/更新的计划数据的可视化显示。这没有做任何.... 我们甚至没有讨论浏览器支持/设备兼容性。

我的建议：

抓住CMS（如果你还没有使用过），如Wordpress或Drupal，并在那里开发。您可以轻松下载大量漂亮的日历（有些效果不佳）。 CMS可以节省您的时间，挫败感，并且您最终可以创造更好的东西。

希望这有助于欢迎来到StackOverflow！：）

动态改变tr的高度

2 个答案:

主要交易：不要这样做。

一些问题

发生了什么：

更多问题

更多问题（30％奖金问题完全免费！）

重点是：

我的建议：