html - 右对齐 div 并防止容器折叠

Question

我在尝试让事件信息类文本作为垂直列表与事件日历的右侧对齐时遇到问题。将事件列表向右浮动似乎完全折叠了我的文本，这是我不想要的。这是我的 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;
}

<div class="workshop-events">
  <h1 class="section-heading">WORKSHOP &amp; EVENTS</h1>
  <!-- EVENT CALENDAR -->
  <div class="calendar">
    <div class="month text-center">June</div>
    <div class="day text-center">30</div>
  </div>
  <!--EVENTS CALENDAR-->
  <div class="events-info">Lorem Ipsum</div>
  <div class="events-info">Dolor Sit Amet Sed</div>
  <div class="events-info">Libero</div>
  <button class="view-all-events">VIEW ALL</button>
</div>
<!-- WORKSHOP AND EVENTS-->

Answer 1

您只需将日历框向左浮动即可。为了获得更好的结果，将所有事件信息 + 按钮包装到一个容器中(为避免文本换行到日历框下方的新行，请参见演示)。

HTML 更新:

<div class="events-container">
    <div class="events-info">Lorem Ipsum</div>
    <div class="events-info">Dolor Sit Amet Sed</div>
    <div class="events-info">Libero</div>
    <button class="view-all-events">VIEW ALL</button>
</div>

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;
}

<div class="workshop-events">
  <h1 class="section-heading">WORKSHOP &amp; EVENTS</h1>
  <!-- EVENT CALENDAR -->
  <div class="calendar">
    <div class="month text-center">June</div>
    <div class="day text-center">30</div>
  </div>
  <!-- EVENTS INFO-->
  <div class="events-container">
    <div class="events-info">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="events-info">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="events-info">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <button class="view-all-events">VIEW ALL</button>
  </div>
</div>
<!-- WORKSHOP AND EVENTS-->