<table> высота нескольких рядов WOES

Question

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

По сути, я пытаюсь создать панель инструментов.Я отказался от .css, когда я не мог получить вещи даже.У меня есть 3 ряда.Наибольшее количество столбцов в строке равно 3, и одна строка будет 2/3 и 1/3, а другая строка будет 50/50 (верхняя строка - 1/3, 1/3 и 1/3).Когда я не смог заставить .css иметь четные столбцы (третья 1/3 смещалась вниз или от центра от остальной части строки), я переключался на.

Когда в ограниченном контентеплитки на приборной панели Мне удалось распределить столбцы / строки равномерно (используя ширину / высоту: 33,3%).Если я изменил размер браузера, плитки сократились до точки, в которой (как и ожидалось), если окно было свернуто влево / вправо, появилось только несколько плиток.Не очень - я надеялся, что даже если контент исчезнет, ​​я смогу свернуть влево / вправо настолько, насколько браузер позволит мне увидеть 3 одинаковых столбца ||||||как это.Но ладно, не важно.

Ну, я поместил контент в нижнюю левую плитку (сетка 3х3) и, конечно, она расширилась.Теперь я перепробовал все (границы, пробелы, переполнения: скрытые и т. Д.) И до сих пор не могу получить то, что хочу.

Я в тупике.Я понимаю, что в определенный момент браузер будет заставлять вещи переполняться (скажем, произвольно, что это должно происходить при 800x600), но я надеялся, что мой дисплей будет соответственно уменьшаться (плитки уменьшатся в равной степени) и что полосы прокрутки внутри плитокпоказать на оси у (переполнение-у), чтобы пользователь мог прокрутить текст.Я даже попробовал 800x600 min / max ширина / высота, но я не смог заставить его работать.

Любой совет был бы оценен.

Это мой HTML-фрагмент:

<div id="dashboard">
    <table cellpadding="0" cellspacing="10">
        <tr>
            <td class="dashboard-tile onethird">
                <div id="Alerts">
                    <div class="content">
                        <header> <span>Alerts</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
            <td class="dashboard-tile onethird">
                <div id="Matters">
                    <div class="content">
                        <header> <span>Matters</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
            <td class="dashboard-tile onethird">
                <div id="RecentActivity">
                    <div class="content">
                        <header> <span>Recent Activity</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="dashboard-tile onethird">
                <div id="Alerts">
                    <div class="content">
                        <header> <span>Alerts</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
            <td class="dashboard-tile onethird">
                <div id="Matters">
                    <div class="content">
                        <header> <span>Matters</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
            <td class="dashboard-tile onethird">
                <div id="RecentActivity">
                    <div class="content">
                        <header> <span>Recent Activity</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="dashboard-tile onethird">
                <div id="Alerts">
                    <div class="content">
                        <header> <span>Alerts</span> </header>
                        <section> Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
            <td class="dashboard-tile onethird">
                <div id="Matters">
                    <div class="content">
                        <header> <span>Matters</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
            <td class="dashboard-tile onethird">
                <div id="RecentActivity">
                    <div class="content">
                        <header> <span>Recent Activity</span> </header>
                        <section> Content Here </section>
                        <footer> Link </footer>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

А это мой .css:

#dashboard { height: 100%; }
#dashboard table { height: 100%; width: 100%; border:0; margin: 0px; padding: 0; }
#dashboard table tr { height: 33.3%;  }
#dashboard table td { vertical-align: top; height: 33.3%; min-width: 33.3%; min-height: 33.3%; max-width: 33.3%; max-height: 33.3%; overflow: hidden;  }
#dashboard table td.onethird { width: 33.3%; }
.dashboard-tile { background-color: #650000; border: 1px solid #790000; }

.dashboard-tile .half {}
.dashboard-tile .twothird {}
.dashboard-tile .full {}
.dashboard-tile .content { margin: 5px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; color:#fff; } 
.dashboard-tile header { font-size: 1.3em; font-weight:bold; width:100%; float:left; padding: 0px 0px 5px 0px; }
.dashboard-tile header span { float: left; text-transform: uppercase; }  

.dashboard-tile section { margin-top:35px; }

.dashboard-tile footer{ }
.dashboard-tile footer span { font-weight:bold; }

Answer 1

Не совсем понятно, что вы хотите, но я все равно попытаюсь ответить.

Довольно просто создать плавный дизайн с третями и половинами.

li{ width:33%; float:left;}

или, альтернативно,

li{ width:50%; float:left;}

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

 @media screen and (max-width:600px){
      li{width:100%}
  }

Чтобы упростить макеты для небольших экранов.

Вот пример вышеуказанных концепций.

РЕДАКТИРОВАТЬ:

Вот несколько другое и упрощенное решение:

html{height:100%;}
body{height:100%;}
div{width:33.333333%; height:33.333333%; float:left; overflow:auto;}
.twothirds{width:66.666666%;}
.half{width:50%;}

Демо