Как я могу заставить эти элементы диапазона расширяться, чтобы заполнить их полную высоту?

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.
Проблема, с которой я сталкиваюсь сейчас, состоит в том, что если один из диапазонов выше 20 пикселей, другие диапазоны не расширяются вместе с ними.

Как я могу получить высоту пролетов равной?

---

Markup:

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

Answer 2

Звучит так, будто вы пытаетесь сделать что-то, что должно быть легко сделать со столом ... и вы можете применять все виды форматирования к таблицам.

Может быть, проще сделать это ...

Answer 3

Span является встроенным элементом, поэтому он, естественно, не будет увеличиваться до размера своего родителя, как это делает блочный элемент, такой как div.

Сказав это, я бы попробовал пару вещей.

1. Сделайте все атрибуты высоты строки каждого диапазона фиксированной высотой - это единственный способ, чтобы все они были одинаковой высоты.

2. попробуйте заключить каждый столбец span в плавающий родительский div, затем очистите родительский div.

   <div id='container'> <div id='row' style="clear:both"> <div id='column1' style='float:left'><span>text...</span></div> <div id='column2' style='float:left'><span>text...</span></div> </div> </div>

Похоже, в предыдущих ответах предлагалось использовать таблицу. Я думаю, что таблица может лучше подходить для того, что вы пытаетесь сделать, но я также считаю полезным знать, как решить эти проблемы с помощью css, потому что они часто появляются.

Answer 4

дисплей: блок; но вы должны использовать таблицу!

Answer 5

Если вас не слишком беспокоит совместимость с IE6 и более старыми версиями, вы можете просто установить элемент span для отображения в виде встроенного блока .

.events_holder span { display: inline-block; }

При этом я должен согласиться с тем, что говорили другие: это похоже на табличные данные, поэтому вам следует использовать таблицу. Нет ничего плохого в использовании таблиц там, где это уместно, и это, безусловно, выглядит как приемлемое приложение.