Question

所以我想构建一个简单的事件框，替换日历中的默认事件框（反应大日历作为参考，但我认为不重要）

我想让它尽可能地响应，但我已经开始使用一个非常静态的盒子，这对应于我想在大屏幕上看到的内容。 Simple fiddle

＆＃13;

.container {
  width: 200px;
  height: 200px;
  background-color: #dddddd;
  margin: 20px;
  padding: 5px;
}

.event-slot-component {
  width: 100%;
  min-height: 30px;
  position: relative;
  background-color: #64a7DD;
  border: 5px;
  border-radius: 3px;
  padding: 2px;
}

.event-slot-start-time {
  font-size: 0.75em;
  vertical-align: top;
  position: absolute;
  top: 0;
  left: 0;
}

.event-slot-end-time {
  font-size: 0.75em;
  float: left;
  vertical-align: bottom;
  position: absolute;
  bottom: 0;
  left: 0;
}

.event-slot-label {
  font-size: 1em;
  top: 8px;
  right: 5px;
  position: absolute;
}

＆＃13;

<div class="container">
  <div class="event-slot-component">
    <div class="event-slot-start-time">17h</div>
    <div class="event-slot-end-time">21h</div>
    <div class="event-slot-label">Occupied Slot</div>
  </div>
</div>

＆＃13;

我的目标是让自己处于中心位置，最终会略微偏向右边。标签，和左侧的两个小指示对应于事件的开始和结束。我尝试过使用flexbox，来自其他StackOverflow的答案，它似乎能够以某种方式做到这一点，但我还没有设法正确显示这三个元素。有关清洁解决方案的任何见解，以实现这一结果？

Answer 1

您需要嵌套您的Flexbox。这真是太棒了！

为了解释，我所做的是创建了三个包装器。

举办整个活动。

举办活动时间。

保持状态。

我们使用弹性框将事件时间和状态包装器相互对接。事件时间仅占用文本使用的空间（加上一点填充）。状态包装器占用其可用空间的100％。

然后使用justify-content和align-items属性将状态包装器设置为弹性框。这使状态居中。

状态文本容器的使用方式与中心状态文本本身的使用方式相同。

＆＃13;

.event-wrapper {
background-color: #eee;
display: flex;
}

.event-times-wrapper {
background-color: skyblue;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

.status-wrapper {
width:100%;
display: flex;
align-items:center;
justify-content: center;
}

.status-text {
height: 100%;
display:flex;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
background-color: tomato;
}

＆＃13;

<article class="event-wrapper">
  <div class="event-times-wrapper">
    <p class="event-start">9:00a</p>
    <p class="event-end">10:00a</p>
  </div>
  <div class="status-wrapper">
    <div class="status-text">Busy</div>
  </div>
</article>

＆＃13;

随后OP要求，没有特殊容器的样本。

＆＃13;

.container {
background-color: #eee;
position: relative;
width: 100vw;
height:6rem;
}

.event-slot-component div {
font-family: sans-serif;
color: white;
background-color: skyblue;
height:3rem;
float:left;
padding-left: 1rem;
padding-right: 1rem;
width:10%;
display:flex;
align-items:center;
justify-content:center;
}

.event-slot-component div:nth-child(2) {
background-color:red;
position:absolute;
bottom:0;
left: 0;
}

.event-slot-component div:last-of-type {
margin-left:25%;
background-color: tomato;
float:left;
height: 6rem;
}

＆＃13;

<div class="container">
  <div class="event-slot-component">
    <div class="event-slot-start-time">17h</div>
    <div class="event-slot-end-time">21h</div>
    <div class="event-slot-label">Occupied Slot</div>
  </div>
</div>

＆＃13;

Answer 2

现有标记最简单的方法是在2个日期值上使用带有column方向的Flexbox，然后使用transform

将标签置于绝对位置

.container {
  width: 200px;
  height:200px;
  background-color: #dddddd;
  margin: 20px;
  padding: 5px;
}
.event-slot-component {
  width: 100%;
  min-height: 30px;
  position: relative;
  background-color: #64a7DD;
  border: 5px;
  border-radius: 3px;
  padding:2px;
  display: flex;
  flex-direction: column;
}
.event-slot-start-time,
.event-slot-end-time {
  font-size: 0.75em;
  flex-grow: 1;                      /*  share the vertical space equal  */
}
.event-slot-label {
  position:absolute;
  font-size: 1em;
  top: 50%;
  left: calc(50% + 10px);            /*  adjust px value for horiz. offset  */
  transform: translate(-50%,-50%);   /*  vert./hor. center the label  */
}

<div class="container">
  <div class="event-slot-component">
    <div class="event-slot-start-time">17h</div>
    <div class="event-slot-end-time">21h</div>
    <div class="event-slot-label">Occupied Slot</div>
  </div>
</div>

如果你想要一个好的响应式解决方案，请一直使用Flexbox，这里有一个日期的包装

.container {
  width: 200px;
  height:200px;
  background-color: #dddddd;
  margin: 20px;
  padding: 5px;
}
.event-slot-component {
  width: 100%;
  min-height: 30px;
  position: relative;
  background-color: #64a7DD;
  border: 5px;
  border-radius: 3px;
  padding:2px;
  display: flex;
}
.event-slot-time {
  display: flex;
  flex-direction: column;
}
.event-slot-start-time,
.event-slot-end-time {
  font-size: 0.75em;
  flex-grow: 1;                  /*  share the vertical space equal  */
}
.event-slot-label {
  flex-grow: 1;                  /*  fill the remaining horizontal space  */
  font-size: 1em;
  display: flex;
  align-items: center;           /*  vertical center the label text  */
  justify-content: center;       /*  horizontal center the label text  */
}

<div class="container">
  <div class="event-slot-component">
    <div class="event-slot-time">
      <div class="event-slot-start-time">17h</div>
      <div class="event-slot-end-time">21h</div>
    </div>
    <div class="event-slot-label">Occupied Slot</div>
  </div>
</div>

在div中安排元素的最佳方式

2 个答案: