Question

我在尝试将事件信息类文本作为垂直列表与事件日历的右侧对齐时遇到了问题。将事件列表向右浮动似乎完全崩溃了我的文本，这是我不想要的。这是我的HTML和CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以简单地将日历框浮动到左侧。为了获得更好的结果，将所有events-info +按钮包装到一个容器中（以避免文本换行到日历框下面的新行，请参阅演示）。

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

将div对齐到右侧并防止容器崩溃

1 个答案: