Плавающие столбцы в обе стороны в JavaScript
Я пытаюсь разместить столбцы с плавающей запятой с помощью CSS, чтобы они располагались равномерно, как в этом блоге: http://typeneu.com
Это кажется невозможным с использованием CSS, поэтому я изучаю JavaScript.
Указанный выше веб-сайт использует этот файл JavaScript: http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js
Я попытался реализовать это для экспериментов, но, похоже, это не работает.
Есть ссылки на руководства по этой теме или предложения по работе с JavaScript или CSS?
Обновлено: я хотел бы, чтобы количество столбцов было гибким в зависимости от разрешения экрана.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Этот файл JavaScript фактически является частью этого плагина:
http://suprb.com/apps/gridalicious/
Однако это не так сложно сделать в CSS. Вам просто нужно использовать поплавки.
Например:
<div style = "float:left">Hello</div>
<div style = "float:left">I'm also saying hello</div>
<div style = "clear:both;"></div>
<div style = "float:left">Hi again</div>
<div style = "float:left">From the second line, that too!</div>
<div style = "clear:both;"></div>
Достаточно ли ясно?
У меня есть сайт, на котором в основном осталось поплавок DIV с установленной шириной в пикселях. В зависимости от разрешения и размера окна у меня может быть 1-n столбцов, в основном вы сможете:
<style>
.myClass
{
float:left;
width:350px;
}
</style>
<div class = "myClass>my content</div>
<div class = "myClass>more content</div>
<div class = "myClass>even more content</div>
Чтобы получить фиксированное количество столбцов, я предполагаю, что вы можете рассчитать ширину с помощью javascript или, возможно, есть какой-то другой трюк.
Редактировать
Хорошо, глядя на их файл JS, вам нужно убедиться, что вы сопоставили свой класс и идентификаторы в соответствии с тем, что они ожидают. Похоже, все ваши сообщения должны быть в div с идентификатором allposts.
Просмотрите HTML-код сайта, на который вы указали сайт, на который вы ссылаетесь, и убедитесь, что ваш HTML-код совпадает с их.
Проблема с этим в том, что если у вас разная высота для каждого сообщения, то при переходе к следующей строке остаются пробелы ... где все это заполнено следующим примером: typeneu.com
Будь проще. Это должно сделать красивую страницу ... css должен включать это:
.header,.bod,.footer { width: 700px; margin: 0 auto; }
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; }
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; }
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;}
.first { width: 100px; left:10px;}
.second { width: 100px; left:110px;}
.third { width: 100px; left:220px;}
.fourth { width: 100px; left:330px;}
.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;}
.tall:after { content: ''; } /*fix of safari bug?*/
и некоторый html (внутри тела, после того, как вы вызвали css):
<body>
<div class = "header">TITLE</div>
<div class = "bod clear">
<div class = "first tall"> Lorem ipsum </div>
<div class = "second"> Lorem ipsum </div>
<div class = "third"> Lorem ipsum </div>
<div class = "fourth"> Lorem ipsum </div>
</div>
<div class = "footer" >FOOTER</div>
</body>
</html>
Просто, работает, правда?
Спасибо за внимание, Алекс. Я хотел бы, чтобы количество столбцов было гибким с разрешением экрана, чтобы это не сработало. Думаю, мне придется попробовать адаптировать javascript inc с темой: suprb.com/grid-a-licious Еще раз спасибо, и любые другие предложения по использованию css приветствуются!
После размещения первого компонента на странице измерьте его размеры, а затем разместите следующие компоненты один за другим в пользовательском интерфейсе, используя абсолютное размещение.
Дело принято. Я это уже знаю, но, полагаю, мне следовало упомянуть об этом на случай, если кто-то, читающий это, не узнает и этого. :П