如何让这些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,其余都是跨度.
每个跨度也都有这个类.event_data.
我现在遇到的问题是,如果其中一个跨度高于20px,则其他跨度不会随之扩展.

如何才能使跨度的高度相等？

---

标记:

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