сеточные Foundation
Массивная решетка для содержимого страницы Совместное использование: например, одна строка для отображения четырех изображений, независимо от того, что требуется средняя ширина экрана.
Вы можете использовать <ul> элемент плюс .small|medium|large-block-grid- num ГРИД Num класс для создания массивной сетки. Num это число используется для указания среднее:
примеров
<Ul класс = "маленький блок -grid-3">
<Li> <IMG SRC = " newyork.jpg" Alt = "Нью - Йорк"> </ li>
<Li> <IMG SRC = " paris.jpg" Alt = "Париж"> </ li>
<Li> <IMG SRC = " sanfran.jpg" Alt = "Сан - Франциско"> </ li>
</ UL>
<Li> <IMG SRC = " newyork.jpg" Alt = "Нью - Йорк"> </ li>
<Li> <IMG SRC = " paris.jpg" Alt = "Париж"> </ li>
<Li> <IMG SRC = " sanfran.jpg" Alt = "Сан - Франциско"> </ li>
</ UL>
Попробуйте »
Другой пример, используйте пункт:
примеров
<Ul класс = "маленький блок -grid-3">
<Li> <p> Просто Простой пример текста ... </ p> </ li>
<Li> <p> Просто Простой пример текста ... </ p> </ li>
<Li> <p> Просто Простой пример текста ... </ p> </ li>
</ UL>
<Li> <p> Просто Простой пример текста ... </ p> </ li>
<Li> <p> Просто Простой пример текста ... </ p> </ li>
<Li> <p> Просто Простой пример текста ... </ p> </ li>
</ UL>
Попробуйте »
Дисплей разное количество разных размеров
При добавлении нескольких блоков сетки различных классов размера могут быть установлены, чтобы отобразить различное количество блоков:
примеров
<Ul класс = "маленький блок -grid-2 средней блок-сетка-3 больших блок-сетка-4">
<Li> <IMG SRC = " newyork.jpg" Alt = "Нью - Йорк"> </ li>
<Li> <IMG SRC = " paris.jpg" Alt = "Париж"> </ li>
<Li> <IMG SRC = " sanfran.jpg" Alt = "Сан - Франциско"> </ li>
<Li> <IMG SRC = " newyork.jpg" Alt = "Нью - Йорк"> </ li>
</ UL>
<Li> <IMG SRC = " newyork.jpg" Alt = "Нью - Йорк"> </ li>
<Li> <IMG SRC = " paris.jpg" Alt = "Париж"> </ li>
<Li> <IMG SRC = " sanfran.jpg" Alt = "Сан - Франциско"> </ li>
<Li> <IMG SRC = " newyork.jpg" Alt = "Нью - Йорк"> </ li>
</ UL>
Попробуйте »