CSS гибкое расположение элементов: фиксированное левое положение, но опускается вниз, чтобы избежать наложения?

Question

Я пытаюсь создать макет, когда у меня есть список меток, начинающихся с некоторой фиксированной процентной позиции, но я хочу, чтобы они нажимали на отдельные строки, если страница становится узкой, чтобы избежать их наложения:

|        |<- 10%   |<-20%     |
label1   label2    label3

|    |    |    |
label1
     label2
          label3

До сих пор я не мог этого сделать (пробовал float, divs spacer, spans), и я начинаю думать, что это может быть невозможно из-за того, как происходит рендеринг.

Знаете ли вы, есть ли решение, или что я мог бы сделать иначе? Вот мой очищенный jsfiddle шаблон.

Answer 1

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

@media only screen and (max-width: 35em) {
    .d2 {margin-top: 1em;}
    .d3 {margin-top: 2em;}
}

Вы можете увидеть пример здесь http://jsfiddle.net/wPrq8/

Answer 2

Чтобы приблизиться к этому поведению с чистым CSS, потребует, чтобы они всплыли . Однако, если ваше намерение состоит в том, чтобы заставить их всех сдвинуться с места сразу, то я пока не нашел способа сделать это.