заполнить контейнер с плавающими div в соответствии с размером окна и настроить ширину div, чтобы установить максимум - PullRequest
Новая
       31

заполнить контейнер с плавающими div в соответствии с размером окна и настроить ширину div, чтобы установить максимум

0 голосов
/ 24 июля 2011

я работаю над макетом страницы для журнала.теперь у него есть 5 различных категорий - каждая из категорий отображается на главном сайте внутри отдельного плавающего элемента div.так что это выглядит так 

--------------page width-------------
-category1--category2--category3-
-category4--category5-

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

-----------------page width-----------
-category1  --category2  --category3 -
-category4        --category5        -

, затем при изменении размера (как только 4 элемента с минимальнойширина подходит): 

------------------------page width----------
-category1--category2--category3--category4-
-category5-

возможно ли это с помощью css?(я так не думаю) или с некоторыми вычислениями JavaScript.Я много пробовал, но мои навыки Java просто очень плохи ...

Большое спасибо!милые приветствия из вены

1 Ответ

0 голосов
/ 24 июля 2011

Я не думаю, что вам нужен javascript для достижения этой цели.Я думаю, что вы ищете медиа-запрос в вашем CSS.

CSS имеет возможность настраивать правила CSS при определенной ширине холста, ширине устройства или ориентации.Таким образом, вы можете иметь разметку, подобную этой 

<div class="container">
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
    <div class="category-wrapper"></div>
</div>

, а затем изменить ширину упаковщиков категорий с помощью CSS, например, 

.category-wrapper{
    float:left;
    width:100px;
}

@media (min-width:500px) and (max-width:950px){ 
    .category-wrapper{
         width:200px;
    }
}

@media (min-width:950px) and (max-width:1024px){ 
    .category-wrapper{
         width:400px;
    }
}

и так далее.

См. Спецификацию для медиа-запросов здесь http://www.w3.org/TR/css3-mediaqueries/ отличный пример концепции такого способа работы здесь http://www.alistapart.com/articles/responsive-web-design/

, и поскольку не все браузеры поддерживают их, используйте ScottУдивительный полифилл Джела https://github.com/scottjehl/Respond, чтобы помочь отстающим.

Надеюсь, это поможет.

...