Динамическая маржа (или симуляция маржи) между левыми плавающими элементами - PullRequest
Новая
       1

Динамическая маржа (или симуляция маржи) между левыми плавающими элементами

0 голосов
/ 30 декабря 2010

У меня осталось несколько чисел. При изменении размера браузера они перемещаются вниз или вверх в зависимости от того, сколько из них может поместиться на линии. Мне было интересно, если есть способ динамически (с css) выровнять эти div'ы (или иметь запас) таким образом, чтобы они всегда заполняли все пространство экрана, изменяя размер области? Другими словами, поле между ними будет изменяться при изменении размера браузера, но как только другой div сможет уместиться, он будет добавлен в строку, или, если минимальное поле будет достигнуто и пройден, другой div переходит на следующую строку, а поля снова расширяются. Вот пример того, как это сейчас, измените размер вдовы, чтобы увидеть оставшееся пространство, которое я хочу «заполнить» 

<html>
<head>
<style>
.test {
float:left;
width: 100px; 
height:100px;
background-color: grey;
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>

1 Ответ

0 голосов
/ 30 декабря 2010

Я видел этот вопрос несколько раз, и в результате всегда кажется, что css (пока) не поддерживает распределение элементов по динамической ширине. Есть хаки, но, честно говоря, я считаю, что самый быстрый способ обойти это - использовать javascript для позиционирования.

что-то вроде этого (записанное в библиотеке prototype ) должно делать то, что вы хотите: 

$(document).observe('dom:loaded',function(){
    spaceSquares();
});
window.onresize = function(){spaceSquares();}
function spaceSquares(){
    // this is the minimum margin per square.
    var minMargin = 20;
    // this tells you how many squares will fit on the top row
    var topRowSquares = Math.floor(document.viewport.getWidth() / ($$('.test')[0].getWidth()+minMargin));
    // this will tell you how much space is left over
    var remainderWidth = document.viewport.getWidth() - (($$('.test')[0].getWidth()+minMargin)*topRowSquares);
    // this will tell you how much margin to put on each item
    var marginWidth = (remainderWidth / topRowSquares) + minMargin;
    // this will put the margin on the top row
    for(var i=0;i<topRowSquares;i++){
        $$('.test')[i].setStyle({'margin-left':marginWidth/2+'px','margin-right':marginWidth/2+'px'});
    }
}

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

Надеюсь, это направит вас в правильном направлении!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...