Форум

Маэстро · #1 (**permalink**) 25.04.2012, 11:45

На экране необходимо расположить прямоугольники (для простоты все одинакового размера) таким образом, чтобы они заполняли доступное пространство окна браузера. Если применить к прямоугольникам (DIV_ам) стиль float:left, то всё понятно и красиво. Вот код:

<html>
<body style="overflow:hidden">
<script>
var m = document.createElement('DIV');  
m.style.cssText = 'height:300px; width:100%; background-color:#CCCCFF; overflow:hidden';
document.body.appendChild(m);    
  
function one(i)
{
var d = document.createElement('DIV');
    d.style.cssText = 'height:20pх; width:100px; margin:5px; text-align:center;  background-color:#FFAAAA; float:left';
d.innerHTML = i;
m.appendChild(d);  
};

function test()
{
for (var i=1; i <= 100; i++) one(i);
};  
  
test();
</script>
</body>
</html>

В данном случае прямоугольники выстраиваются слева направо по горизонтали и при достижении правого края экрана построение идет вниз.
А мне надо, чтобы прямоугольники выстраивались сверху вниз и при достижении нижнего края экрана построение продолжалось слева направо. Скроллера не должно быть.
Использование float:top естественно дает другой эффект. Что-то не соображу, как сделать?

Pavel M. · #2 (**permalink**) 25.04.2012, 15:27

добавьте стили для разбивки текста на несколько колонок для первого DIV

<html>
<style>
  body > div {
    -moz-column-width:110px;
    -webkit-column-width:110px;
    column-width:110px;
  }
</style>
<body style="overflow:hidden">
<script>
var m = document.createElement('DIV'); 
m.style.cssText = 'height:300px; width:100%; background-color:#CCCCFF; overflow:hidden;';
document.body.appendChild(m);   
   
function one(i)
{
var d = document.createElement('DIV');
  d.style.cssText = 'height:20pх; width:100px; margin:5px; text-align:center;  background-color:#FFAAAA; float:left;';
d.innerHTML = i;
m.appendChild(d); 
};
 
function test()
{
for (var i=1; i <= 100; i++) one(i);
}; 
   
test();
</script>
</body>
</html>

а для IE<10
http://www.xiper.net/collect/js-plug...ti-column.html

Маэстро · #3 (**permalink**) 25.04.2012, 16:25

Pavel M.,
да, спасибо, вот только что делать с IE8? А еще, как ни странно, в Opera этот пример тоже не работает. Хотя многоколоночность в Опере я раньше проверял - работало.

P.S. нашел js-хак "css3-multi-column.js" для IE (делает многоколоночность ) - жуть. 979 строк...

trikadin · #4 (**permalink**) 25.04.2012, 17:25

Сообщение от Маэстро

979 строк...

А вы минификатором его, минификатором!

Pavel M. · #5 (**permalink**) 25.04.2012, 23:06

Сообщение от Маэстро

А еще, как ни странно, в Opera этот пример тоже не работает. Хотя многоколоночность в Опере я раньше проверял - работало.

чтобы и в Опере (если 11.6 и новее) работало
вместо float: left
сделайте, например display: inline-block;

Маэстро · #6 (**permalink**) 26.04.2012, 12:13

Да, спасибо. Но Вы знаете, я последнее время всё больше отказываюсь от стиля float, да и от всяких inline в верстке, несмотря на то, что использовать тег <table> считается устаревшей технологией. Приходится опять использовать <table>. Почему? -Народ жалуется, что при копировании с сайта таблиц (через clipboard) в MS Excel или в MS Word получается каша (на float:...). А при использовании <table> - всё нормально.

Вот возьмите, например отсюда http://www.missfit.ru/diet/table-calory/ скопируйте таблицу в Excel - тут будет нормально.

Поэтому я подумываю о следующем механизме своей же задачи:
При размещении прямоугольников сверху вниз - слева направо не используем ни многоколоночность, ни флоат, ни инлайн, а сначала получаем высоту и ширину внешнего DIV_а и делаем расчет количество столбцов и строк в таблице; строим <table><tr><td>...
Конечно, при onresize придется удалять таблицу и строить ее заново. Но при этом избавляемся от проблем в IE и проблем с копированием.

Форум

Справочник

Discord чат

Курсы javascript