html - 我怎样才能让这些 span 元素展开以填满它们的整个高度？

Question

CSS:

.events_holder {
    width:100%;
    background-color: #d9ceae;
}
    .events_holder .event_holder {
        width:100%;
        float: left;
        min-height: 20px;
    }
        .events_holder .event_holder .event_data {
            border: thin gray dotted;
            font-size: 80%;
            float:left;
            min-height:20px;
        }
        
        .events_holder .event_holder .event_date {
            width: 22%;
        }
        
        .events_holder .event_holder .event_title {
            width: 22%;
        }
        
        .events_holder .event_holder .event_venue {
            width: 15%;
        }
        
        .events_holder .event_holder .event_city {
            width: 27%;
        }
        
        .events_holder .event_holder .event_type{
            width: 10%;
        }

.events_holder和.event_holder都是div的，其余都是span。
每个跨度也有类 .event_data.
我现在遇到的问题是，如果其中一个跨度高于 20 像素，则其他跨度不会随之扩展。

如何使跨度的高度相等？

---

标记:

<div class="events_holder"><div class="event_holder">
                <span class="event_date event_data faded">06/30/09<br>08:06 pm - 10:06 pm</span>

                <span class="event_title event_data">
                    event name<br>
                    <span class="small"> subtitle for the event </span>
                </span>
                <span class="event_venue event_data">
                    The NYC cafe
                </span>
                <span class="event_city event_data faded">

                    My first city
                </span>
                <span class="event_type event_data faded">
                    Events
                </span>
            </div>
            <div style="clear: both;"></div>
            <div class="event_holder">
                <span class="event_date event_data faded">06/19/09<br>08:06 pm - 10:06 pm</span>

                <span class="event_title event_data">
                    Test Event<br>
                    <span class="small">  </span>
                </span>
                <span class="event_venue event_data">
                    The NYC cafe
                </span>
                <span class="event_city event_data faded">

                    My first city
                </span>
                <span class="event_type event_data faded">
                    Events
                </span>
            </div>
            <div style="clear: both;"></div>
            <div class="event_holder">
                <span class="event_date event_data faded">06/19/09<br>08:06 pm - 10:06 pm</span>

                <span class="event_title event_data">
                    Copy of Test Event<br>
                    <span class="small">  </span>
                </span>
                <span class="event_venue event_data">
                    The NYC cafe
                </span>
                <span class="event_city event_data faded">

                    My first city
                </span>
                <span class="event_type event_data faded">
                    Events
                </span>
            </div>
            <div style="clear: both;"></div>
            </div>
      <div style="clear: both;">

Answer 1

使用表格。标记会更少，它会自动将行扩展到最大高度并保持列对齐。

table {
    width:100%;
    background-color: #d9ceae;
    border-collapse:collapse;
}
td {
    border: thin gray dotted;
    font-size: 80%;
}

<table>
    <tr>
        <td>06/30/09<br>08:06 pm - 10:06 pm</td>
        <td>event name<br><span class="small"> subtitle for the event </span></td>
        <td>The NYC cafe</td>
        <td>My first city</td>
        <td>Events</td>
    </tr>
    <tr>
        <td>06/19/09<br>08:06 pm - 10:06 pm</td>
        <td>Test Event<br><span class="small">  </span></td>
        <td>The NYC cafe</td>
        <td>My first city</td>
        <td>Events</td>
    </tr>
    <tr>
        <td>06/19/09<br>08:06 pm - 10:06 pm</td>
        <td>Copy of Test Event</td>
        <td>The NYC cafe</td>
        <td>My first city</td>
        <td>Events</td>
    </tr>
</table>