Масштабируемый способ стека в CSS

Ответ 1

Вы можете сделать свои элементы плавающими и дать им отрицательный запас для желаемого эффекта. <div class="nofloat">Floating box</div> состоит в том, чтобы каждая аннотация пропускала строку. Видимость настроена на скрытое, так что элемент по-прежнему влияет на макет.

<div class="floating-box1">Floating box1</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box2</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box3</div>
<div class="nofloat">Floating box</div>
<div class="floating-box">Floating box4</div>

CSS

.floating-box1 {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
}
.floating-box {
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    margin-left:-160px; 
}
.nofloat{
    visibility:hidden;
}

jsfiddle, например: http://jsfiddle.net/1nu02a37/

Ответ 2

EDIT: Я сделал это:). Использование преобразования поверните в левом верхнем углу нот, а затем измените направление вращения слева вверху родительский div. XD

Вы можете изменить градусы, пока родитель отрицательно те же степени для разных степеней смещения...

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

Я не знаю, как пролить оставшуюся часть ответа, это старый ответ.

Лучшее, что я мог придумать.

Использует псевдо до и после.

Прежде чем создать "бар" ширину левого смещения и установить высоту. Так что если после более чем 200px высоты, он возвращается на родину слева.

После этого есть часть, которая показывает липкую заметку.

Если кто-то может понять, как переместить это в сам элемент, не будучи в псевдо использовании атрибута title, тогда мы победим! В противном случае вы можете получить самое близкое, не создавая дополнительных элементов. Это примерно так же, как семантические, как липкие заметки. Очень интригующий вопрос!

HTML

<div class="stack">
  <div class="note" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></div>
  <div class="note" title="Sed ac tellus at quam convallis feugiat. Ut vehicula leo non tellus convallis, id faucibus quam varius. Sed feugiat nulla in elit dignissim condimentum."></div>
  <div class="note" title=""></div>
  <div class="note" title="Cras quis volutpat sapien. Mauris volutpat ultrices lacus eu accumsan. Cras tempor sapien maximus quam finibus, ullamcorper imperdiet mauris aliquam."></div>
</div>

CSS

.note:before {
  content: '';
  width: 20px;
  height: 200px;
  float: left;
}
.note:after {
  content: attr(title);
  width: 200px;
  min-height: 200px;
  padding: 10px;
  background: khaki;
  box-shadow: 1px 2px 7px rgba(0,0,0,.3);
  border: khaki 1px outset;
  display: inline-block;
  margin: 10px 0 -190px 0;
}

Ответ 3

Это действительно интересный вопрос. Я думаю, что я буду смотреть на нее семантически, а не на код.

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

Подумайте о физическом стеке липких заметок. Являются ли они рядом друг с другом или объединены они в другую "вещь"?

Семантически, они представляют собой стек. Вы можете посмотреть на это и сказать, что это четкое физическое представление списка, причем ul является стеком, а li - записками. Это делает совершенный смысловой смысл.

Вы также можете сказать, что физическое размещение каждой ноты зависит от физического размещения того, что было до нее. Вы физически вставляете связанные заметки друг на друга (они просто торчат справа и внизу), но организация каждой последовательной ноты зависит от того, что было до нее. Некоторые могут сказать, что это объект дизайна, а не семантический, но почему вы складываете заметки, если они не связаны с семантикой? Это означает, что их вложение может также иметь смысл семантически.

Чтобы иметь их бок о бок в вашем коде, но представленный как не бок о бок, пользователю на самом деле кажется семантически бессмысленным для меня. Если у вас нет родительского контейнера для представления стека. Это означает, что вы просто используете другие элементы для представления ul/li.

Ответ 4

Прикосновение JavaScript может сделать трюк.

var arrStickyNotes = document.querySelectorAll('.stickynote');
var pos = 0;
for (i = 0; i < arrStickyNotes.length; i++) {
    arrStickyNotes[i].style.top = pos + 'px';
    arrStickyNotes[i].style.left = pos + 'px';
    pos += 10;
}

.stickynote {
    background: #fc0;
    border: 1px solid #f90;
    border-radius: 5px;
    padding: 10px;
    width: 75px;
    position:absolute;
}
.container {
    position:relative;
}

<div class="container">
    <div class="stickynote">Sticky!!!</div>
    <div class="stickynote">Sticky!!!</div>
    <div class="stickynote">Sticky!!!</div>
</div>

Ответ 5

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

Вы можете сделать это с помощью препроцессора, если вам нравится 4000 строк исходного кода только для вашего 1k-стека. Тривиальный, действительно, но это все еще жесткий предел.

Sass - DEMO

Я бы опубликовал вывод в фрагменте, но SO закричал на меня.

Тело ограничено 30000 символами; вы ввели 79511.

@mixin notes($m, $n: 10) {
  @for $i from 1 through $n {
    &:nth-child(#{$i}) {
      @each $k, $v in $m {
        #{$k}: $v * $i;
      }
    }
  }
}

* {
  font-family: 'Segoe UI';
}
.stickynote {
  position: absolute;
  background: #fc0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;

  @include notes((top: 10px, left: 10px), 1000);
}

CSS - довольно немасштабируемый язык, когда дело доходит до некоторых повторяющихся задач.

Я также согласен с Синтаксической ошибкой о семантике этого.

Реально, я не уверен, почему вам понадобится масштабируемое решение CSS для разметки, которое, очевидно, должно быть сгенерировано. Вы не можете вручную писать сотни элементов .stickynote. Независимо от того, что генерирует разметку, вы также можете создавать стили.