html - CSS div 定位不正确

Question

我正在尝试在我的网站上建立一个事件部分。当我在其中放置多个事件时，div 位置不正确。HTML

<div class="col-sm-5 round-body" id="events">
            <h1>Events</h1>
              <div class="event-list">
                <div class="event-date">
                  <div class="event-month">May</div>
                  <div class="event-day">06</div>
                </div>
                <div class="event-text">
                  <p><strong>Blah blah blah Work</strong></p>
                </div>
              </div>
              <div class="event-list">
                <div class="event-date">
                  <div class="event-month">May</div>
                  <div class="event-day">10-23</div>
                </div>
                <div class="event-text">
                  <p><strong>Blah blah blah</strong></p>
                </div>
              </div>
              <div class="event-list">
                <div class="event-date">
                  <div class="event-month">May</div>
                  <div class="event-day">06</div>
                </div>
                <div class="event-text">
                  <p><strong>Blah blah blah Work</strong></p>
                </div>
              </div>
          </div>

CSS

.event-list .event-date{
  padding: 15px 15px 15px 15px;
  background-color: #109902;
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin-right: 15px;
  width: 80px;
}
.event-list, .event-month, .event-day{
  width: 100%;
}
.event-date{
  float: left;
  padding-left: 15px;
}

jsfiddle 链接如下 https://jsfiddle.net/u1pucb15/5/

Answer 1

请使用 display: inline-block 作为事件日期 div

.event-list .event-date{
        padding: 15px 15px 15px 15px;
        background-color: #109902;
        color: #fff;
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        margin-right: 15px;
        width: 80px;
    }
    .event-list, .event-month, .event-day{
        width: 100%;
    }
    .event-list{
        margin-bottom: 10px;
    }
    .event-date{
        display: inline-block;
        padding-left: 15px;
    }
    .event-text {
        display: inline-block;
        vertical-align: top;
    }

<div class="col-sm-5 round-body" id="events">
    <h1>Events</h1>
    <div class="event-list">
        <div class="event-date">
            <div class="event-month">May</div>
            <div class="event-day">06</div>
        </div>
        <div class="event-text">
            <p><strong>Blah blah blah Work</strong></p>
        </div>
    </div>
    <div class="event-list">
        <div class="event-date">
            <div class="event-month">May</div>
            <div class="event-day">10-23</div>
        </div>
        <div class="event-text">
            <p><strong>Blah blah blah</strong></p>
        </div>
    </div>
    <div class="event-list">
        <div class="event-date">
            <div class="event-month">May</div>
            <div class="event-day">06</div>
        </div>
        <div class="event-text">
            <p><strong>Blah blah blah Work</strong></p>
        </div>
    </div>
</div>