html – 将div对齐到右边,防止容器崩溃

我无法尝试将事件信息类文本作为垂直列表与事件日历的右侧对齐.将事件列表向右浮动似乎完全崩溃了我的文本,这是我不想要的.这是我的HTML和CSS：

.workshop-events {
  width: 100%;
  background-color: #f2f2f2;
  padding: 1px 20px;
  /*padding: 20px;*/
}
.calendar {
  width: 75px;
  display: table-cell;
}
.calendar .month {
  text-transform: uppercase;
  font-size: 16px;
  border: 1px solid #b2b2b2;
  padding: 3px 0;
  background: #FFF;
}
.calendar .day {
  font-size: 30px;
  font-weight: 500;
  border: 1px solid #b2b2b2;
  border-top: none;
  padding: 7px 0;
  background: #FFF;
}
.calendar .day {
  font-size: 30px;
  font-weight: 500;
  border: 1px solid #b2b2b2;
  border-top: none;
  padding: 7px 0;
  background: #FFF;
}
.events-info {
  font-weight: bold;
  font-size: 14px;
}

heading">WORKSHOP & EVENTS

最佳答案

您只需将日历框浮动到左侧即可.为了获得更好的结果,将所有events-info按钮包装到一个容器中(以避免文本换行到日历框下面的新行,请参阅演示).

HTML更新：

CSS更新：

.workshop-events {
  overflow: auto; /*fix possible collapses caused by floating*/
}
.calendar {
  float: left;
  margin-right: 20px;
}
.events-container {
  overflow: auto; /*prevent the text to wrap below the calendar*/
}

.workshop-events {
  width: 100%;
  background-color: #f2f2f2;
  padding: 20px;
}
.calendar {
  width: 75px;
  display: table-cell;
}
.calendar .month {
  text-transform: uppercase;
  font-size: 16px;
  border: 1px solid #b2b2b2;
  padding: 3px 0;
  background: #FFF;
}
.calendar .day {
  font-size: 30px;
  font-weight: 500;
  border: 1px solid #b2b2b2;
  border-top: none;
  padding: 7px 0;
  background: #FFF;
}
.calendar .day {
  font-size: 30px;
  font-weight: 500;
  border: 1px solid #b2b2b2;
  border-top: none;
  padding: 7px 0;
  background: #FFF;
}
.events-info {
  font-weight: bold;
  font-size: 14px;
}

/*NEW RULES BELOW*/
.workshop-events {
  overflow: auto;
}
.calendar {
  float: left;
  margin-right: 20px;
}
.events-container {
  overflow: auto;
}

heading">WORKSHOP & EVENTS