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

以下是翻译的结果，内容涉及IT技术：

以下是jsfiddle链接

https://jsfiddle.net/u1pucb15/5/

- reza

---

你想让它们精确定位吗？一个接一个地排列，像菜单一样吗？ - Zachariel

这不是正确的吗？你期望的输出是什么？ - ketan

确切地说，一个框放在另一个框的下面。所有的框都将从左边开始。 - reza

只需在包含文本的“div”和包含日期的下一个“div”之间添加一个空格即可。 - Zachariel

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>

- Kapil

Answer 2

将 .event-text 的属性设为 float: left;。

.event-text {
    float: left;
}

将 clear: left; 添加到 .event-list

工作的Fiddle

- ketan

---

@reza 很乐意提供帮助。别忘了将其标记为答案。 - ketan

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

演示在这里

- Ivin Raj

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

- applecrusher