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>

Answer 2

将float: left;赋予.event-text

.event-text {
    float: left;
}

和clear: left;到.event-list

工作Fiddle

Answer 3

试试这个：

.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;
  margin-bottom:5px;
}
.event-list, .event-month, .event-day{
    width: 100%;
}
.event-date{
    float: left;
    padding-left: 15px;
}

.event-text {
    float: left;
}
.event-list {
    clear: left;
}

演示此处

Answer 4

这可能不是你想要的，但更接近这样的东西？

.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{
  display:inline-block;
}
.event-month, .event-day{
    width: 100%;
}

.event-date{
    padding-left: 15px;
}