Как правильно использовать стиль float?
На экране необходимо расположить прямоугольники (для простоты все одинакового размера) таким образом, чтобы они заполняли доступное пространство окна браузера. Если применить к прямоугольникам (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 естественно дает другой эффект. Что-то не соображу, как сделать? |
добавьте стили для разбивки текста на несколько колонок для первого 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 |
Pavel M.,
да, спасибо, вот только что делать с IE8? А еще, как ни странно, в Opera этот пример тоже не работает. Хотя многоколоночность в Опере я раньше проверял - работало. P.S. нашел js-хак "css3-multi-column.js" для IE (делает многоколоночность ) - жуть. 979 строк... :( |
Цитата:
|
Цитата:
вместо float: left сделайте, например display: inline-block; |
Да, спасибо. Но Вы знаете, я последнее время всё больше отказываюсь от стиля 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 и проблем с копированием. |
| Часовой пояс GMT +3, время: 16:45. |