Html 如何使这些跨度图元展开以填充其全部高度？ CSS:

.events\u holder

和

.event\u holder

都是

div

，其余都是span.
每个span还具有类

.event\u data

我现在遇到的问题是，如果其中一个跨距高于20px，其他跨距就不会随之扩展

如何使跨距的高度相等

---

标记：

06/30/09
08:06 pm-10:06 pm
事件名称

活动字幕
纽约咖啡馆
我的第一个城市
事件
09年6月19日
08:06下午-10:06下午
测试事件

纽约咖啡馆
我的第一个城市
事件
09年6月19日
08:06下午-10:06下午
测试事件副本

纽约咖啡馆
我的第一个城市
事件
Span是一个内联元素，因此它自然不会像div这样的块元素那样增长到其父元素的大小

话虽如此，我还是想尝试几件事

将每个跨度的所有线高度区域设置为固定高度-这是使它们都具有相同高度的唯一方法

尝试将每个跨度列封装在浮动父div中，然后清除父div



text…
text…


看起来前面的答案建议使用表格。我认为表格可能更适合您正在尝试做的事情，但我也认为知道如何使用css解决这些问题很有用，因为它们经常出现。
听起来好像您正在尝试使用表格做一些应该很容易做到的事情。。
您还可以将各种格式应用于表

也许这样做更简单…
使用表格。标记将更少，它将自动将行扩展到最大高度，并保持列对齐

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

表格{
宽度：100%；
背景色：#d9ceae；
边界塌陷：塌陷；
}
运输署{
边框：细灰色斑点；
字号：80%；
}
06/30/09
08:06 pm-10:06 pm
事件名称
事件的子标题
纽约咖啡馆
我的第一个城市
事件
09年6月19日
08:06下午-10:06下午
测试事件

纽约咖啡馆
我的第一个城市
事件
09年6月19日
08:06下午-10:06下午
测试事件副本
纽约咖啡馆
我的第一个城市
事件
如果您不太担心与IE6及更早版本的兼容性，您可以将span元素设置为显示为一个

话虽如此，我还是同意其他人的说法：这看起来像是表格数据，因此你应该使用表格。在适当的地方使用表并没有什么错，这看起来确实是一个可以接受的应用程序。
display:block；但是你应该用一张桌子
 这看起来像一个表，您不想使用表元素有什么原因吗？因为您应该使用表的原因有一个无休止的列表。首先，在下载整个表之前，它们不会显示。这个分组在某个时候可能会有图像。好的，只是问问。我相信，如果您声明“table layout:fixed”，浏览器将在下载整个表之前开始显示表内容（鉴于所有单元格都定义了宽度，您似乎可以这样做）。否则，我认为您唯一的选择是使用“table”和“table cell”“display”声明，这在IE6/7中不受支持。不同的浏览器以不同的方式呈现表。在
表格布局：auto
模式中，一些以增量方式渲染（并随着渲染进行调整），一些等待所有数据。据我所知，在
表格布局：修复
模式下，没有一个无法增量渲染。使用正确的标记，否则您会陷入-'中描述的陷阱，CSS赋予“class”属性如此强大的功能，以至于作者可以想象，基于元素设计自己的“文档语言”，但使用…'这并不太有效。这会导致其各自列中的所有跨距高度相同，但如果event_title可能高于.event_city。
<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;">

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>

.events_holder span { display: inline-block; }