css - 如果内容深入，div 的边框会自动升高

Question

我有一个带有边框的类“​​event_area_table_termin”。在类里面我有内容，如果内容深入，那么我的边界类不会自动执行。我给类(class)一个固定的高度，但这不是我需要的解决方案。

这是我的屏幕问题:

我想要这个解决方案:

这是我的 HTML 代码:

<div class="row">
        <div class="twelve columns event_margin_zero">
            <div class="event_area_table">
                <div class="event_list_icon">
                    <i class="fa fa-chevron-down fa-lg" style="margin-left:" 5px;="" margin-top:="" 7px;"=""></i>
                </div>
                <div class="eight columns">
                    <h3><a href="#">
                            Abendmarkt Osnabrueck - Osnabrück - 49076                        </a></h3>
                    <i class="fa fa-map-marker fa-lg" style="margin-right: 5px;"></i>
                    49076 Osnabrück - Albrechtstraße 15                </div>
                <div class="threeb columns">
                    <div class="event_area_table_icon">
                        <!--  
                          <a href="#" class="btn btn_gray" style="padding: 5px 12px;" title="Veranstaltungsort bearbeiten"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                          <a href="#" class="btn btn_red" data-featherlight="#fl1" style="padding: 5px 12px;" title="Veranstaltungsort löschen"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a>
                        -->
                    </div>
                </div>

            </div>
            <div class="event_area_table_termin">
                <div class="twelve columns">

                    <h3>Terminübersicht</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Titel</th>
                                <th>Startdatum</th>
                                <th>Enddatum</th>
                                <th>Wiederholung</th>
                                <th>Art</th>
                                <th>Aktion</th>
                            </tr>
                        </thead>
                        <tbody>   
                            <tr><td>Abendmarkt Osnabrueck</td><td>11.04.2014</td><td>18.04.2014</td><td>Täglich</td><td>Floh-, Trödel- &amp; Jahrmarkt</td><td><a href="" class="btn btn_orange" data-featherlight="#fl3" style="padding: 5px 12px;"><i class="fa fa-tint 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=1X4JxCOwhDpD4Oj5ch&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/meine-veranstaltungen.html?event_id=1X4JxCOwhDpD4Oj5ch&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a></td></tr><tr><td>Frühlingmarkt Osnabrück</td><td>19.04.2014</td><td>22.04.2014</td><td>Täglich</td><td>Floh-, Trödel- &amp; Jahrmarkt</td><td><a href="" class="btn btn_orange" data-featherlight="#fl3" style="padding: 5px 12px;"><i class="fa fa-tint 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=LKb77tAmVzeJJjE83LH&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/meine-veranstaltungen.html?event_id=LKb77tAmVzeJJjE83LH&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a></td></tr><tr><td>Herbstmarkt Osnabrück</td><td>18.04.2014</td><td>24.04.2014</td><td>Täglich</td><td>Floh-, Trödel- &amp; Jahrmarkt</td><td><a href="" class="btn btn_orange" data-featherlight="#fl3" style="padding: 5px 12px;"><i class="fa fa-tint 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area_id=OnRD4sBrvHZgAy4rK4&amp;event_id=h0NTcpfUlinWbpwBbpB1&amp;func=edit_event" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-pencil 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-eye 2x" style="padding-left: 3px;"></i></a>
                                    <a href="#" class="btn btn_gray" style="padding: 5px 12px;"><i class="fa fa-copy 2x" style="padding-left: 3px;"></i></a>
                                    <a href="/marktadresse/meine-veranstaltungen.html?event_id=h0NTcpfUlinWbpwBbpB1&amp;func=delete_event" class="delEvent btn btn_red" data-featherlight="#fl2" style="padding: 5px 12px;"><i class="fa fa-trash-o 2x" style="padding-left: 3px;"></i></a></td></tr>                        </tbody>
                    </table>

                    <a href="/marktadresse/veranstaltungstermine-erstellen.html?area=Abendmarkt+Osnabrueck&amp;area_id=OnRD4sBrvHZgAy4rK4" class="btn btn_green right" style="text-decoration: none"><i class="fa fa-plus fa-lg" style="margin-right: 10px;
                                                                                                                                                                                                            position: relative;
                                                                                                                                                                                                            top: -1px;"></i>neuen Termin für Abendmarkt Osnabrueck erstellen</a> <br><br>
                    <a href="#" class="right" style="margin-top: 10px"><i class="fa fa-chevron-right fa-lg" style="margin-right: 5px;"></i>Alle Veranstaltungsorte</a>

                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>

JSFIDDLE DEMO

希望有人能帮助我。

Answer 1

在您的 CSS 页面中添加此代码...

.event_area_table_termin { border: 1px solid #ccc; height: 100%; }

Output Fiddle