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

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

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

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

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

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

Любой совет будет принят во внимание.

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

<div id="dashboard">
 <table cellpadding="0" cellspacing="10">
 <tbody><tr>
 <td>
 <div id="Alerts">
 <div>
 <header> <span>Alerts</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 <td>
 <div id="Matters">
 <div>
 <header> <span>Matters</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 <td>
 <div id="RecentActivity">
 <div>
 <header> <span>Recent Activity</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div id="Alerts">
 <div>
 <header> <span>Alerts</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 <td>
 <div id="Matters">
 <div>
 <header> <span>Matters</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 <td>
 <div id="RecentActivity">
 <div>
 <header> <span>Recent Activity</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div id="Alerts">
 <div>
 <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>
 <div id="Matters">
 <div>
 <header> <span>Matters</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 <td>
 <div id="RecentActivity">
 <div>
 <header> <span>Recent Activity</span> </header>
 <section> Content Here </section>
 <footer> Link </footer>
 </div>
 </div>
 </td>
 </tr>
 </tbody></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; }

Я знаю, это не идеально. Но большое спасибо заранее за любое руководство/примеры/и т.д.

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%;}

демонстрация

licensed under cc by-sa 3.0 with attribution.