Плавающие столбцы в обе стороны в JavaScript - PullRequest
Новая
       10

Плавающие столбцы в обе стороны в JavaScript

3 голосов
/ 06 января 2009

Я пытаюсь разместить столбцы с помощью CSS, чтобы они равномерно складывались, как в этом блоге: http://typeneu.com

Кажется невозможным использование CSS, поэтому я изучаю JavaScript.

Сайт, указанный выше, использует этот файл JavaScript: http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js

Я пытался применить его для экспериментов, но, похоже, он не работает.

Есть ли ссылки на учебники по этой теме или предложения по работе с JavaScript или CSS?

Редактировать: я хотел бы, чтобы количество столбцов было гибким с разрешением экрана.

Ответы [ 4 ]

0 голосов
/ 19 октября 2018

После размещения первого компонента на странице возьмите его размеры, затем поместите следующие компоненты один за другим в пользовательский интерфейс, используя абсолютное размещение.

0 голосов
/ 06 января 2009

У меня есть сайт, который в основном имеет плавающее число в 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-файл, вам нужно убедиться, что вы сопоставляете свой класс и идентификаторы с тем, что они ожидают.

Проверьте HTML-код сайта, на который вы ссылались, и получите ваш HTML-код, соответствующий их.

0 голосов
/ 06 января 2009

Будьте проще. Это должно сделать хорошую страницу ... 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>

Просто, работает, верно?

0 голосов
/ 06 января 2009

Этот файл 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>

Это достаточно ясно?

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

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

...