html - 从下到上，从右到左将小矩形放置在大矩形内(日历)

Question

我正在构建一个日历，这就是我所追求的: http://postimg.org/image/vpd10bkqt/

所以基本上我想将所有事件显示为适当日期的大矩形。

难点是第一个元素应该显示在右下角，并且应该从右到左、从下到上填写表格。

我认为最简单的解决方案是，如果矩形是span 元素周围有实线边框，它包含一个点作为文本。

这是一个 jsfiddle 演示: http://jsfiddle.net/jv392gmv/

CSS:

    section#calendar {
        width: 970px;
    }

    time {
        display: inline-block;
        width: 120px;
        height: 120px;
        margin: 4px;
        text-align: right;
        font-size: x-large;
        font-weight: 900;
        border: 1px solid #c3c7c7;
        border-radius: 5px;
        background: #fff;
    }
    time.notmonth {
        background: #777;
    }
    section#calendar h1 {
      text-align: center;
    }
    section#calendar time a {
        display: inline-block;
        width: 110px;
        height: 110px;
        margin: 5px 5px 0 0;
        padding: 3px 3px 0 0;
        color: #f55b2c;
        text-decoration: none;
    }
    section#calendar time a:hover {
        color: #000;
        }

    span.event {
      top: 10%;
      left: 7px;
      position: relative;
        border-color: #222;
        border-style: solid;
        border-radius: 5px;
        border-width: 5px;

    }

HTML:

    <section id="calendar">
      <h1>
      <a href="prevyear" title="previous" accesskey=",">←</a>
      July 2015
      <a href="/nextyear" title="next" accesskey=".">→</a>
      </h1>
      <time datetime="2011-05-29">
        <a href="#">29</a>
         <!-- <span class="event">.</span> -->
      </time>
    </section>

有人知道如何实现它吗？

最初的时间标签想法来自这里: http://thenewcode.com/355/HTML5-Calendar-With-CSS3-and-Microdata

Answer 1

在容器中，设置180度的旋转。

在 child 身上，再次旋转让他们直立

.base {
  width: 140px;
  height: 140px;
  border: solid 1px black;
  position: relative;
}
.test {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  transform: rotate(180deg);
}

.children {
  width: 40px;
  height: 40px;
  background-color: lightblue;
    transform: rotate(180deg);
  display: inline-block;
  margin: 2px;
}

<div class="base">
  <div >123</div>
  <div class="test">
    <div class="children">1</div>
    <div class="children">2</div>
    <div class="children">3</div>
    <div class="children">4</div>
    <div class="children">5</div>
    <div class="children">6</div>
    <div class="children">7</div>
  </div>
</div>