CSS: Сделать новую строку выше, а не ниже

У меня есть div, в котором есть некоторые плавающие дети. Когда ширина div заполняется, она продолжает новую строку: ниже первая строка (что является регулярным ожидаемым поведением). JSFiddle to show what I am talking about.CSS: Сделать новую строку выше, а не ниже

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

EDIT: Вот новая ссылка с what it does and what I want it to do

EDIT2:Here is an example with more elements

источник

2013-07-02 Flynn

Итак, в [данном примере] (http://jsfiddle.net/e7qde/3/) вы хотите '3 новой строки 1 2'? –

[Правильно ли я это сделал?] (Http://jsfiddle.net/e7qde/6/) Просто добавьте «clear: both;» к детям. – qwerty

Правильно. Честно говоря, лучшая ситуация действительно была бы 1 новой строкой 2 3, но я могу изменить, что это за элемент. Я считаю, что теперь 3 новых строки 1 2 проще. – Flynn

Добавить clear: both; к дочерним элементам. Это заставит каждого ребенка на свою линию.

http://jsfiddle.net/e7qde/6/

Update:

http://jsfiddle.net/e7qde/12/

источник

2013-07-02 13:24:29 qwerty

Я бы все же хотел иметь все элементы, которые могут быть встроенными, встроенными. Просто любое переполнение должно идти выше, а не ниже. – Flynn

Не уверен, что я понимаю. Так что, если у вас есть список таких элементов, как '1 2 3 4 5", вы хотите, чтобы он выглядел как '5 - 4 3 - 2 1' (« - »- это строка)? – qwerty

Я просто добавил ссылку на новую JSFiddle. Это то, что я хочу сделать: http://jsfiddle.net/Ap2zK/ – Flynn

Если только когда-либо будет разделение между 1 и 2 (предполагается, что более 1 добавляются, как вы сказали, что это динамическая) вы можете добавить nth-child к вашему второму .child item like this:

.child:nth-child(2) { 
    clear:left; 
}

JsFiddle

источник

2013-07-02 13:43:47

Содержимое является динамическим. Желаемое поведение ОП - только для нечетного числа элементов. Когда есть четное число, это выглядит неправильно. – cimmanon

Вы абсолютно правы, я тестировал 1, 3 и выше, но забыл о 2 –

Вы нуждаясь селектор nth-last-child:

http://jsfiddle.net/e7qde/16/

.child:nth-last-child(even) { 
    clear: both; 
}

Обратите внимание, что это не доступно в IE8 и старше.

источник

2013-07-02 14:17:32 cimmanon

CSS: Сделать новую строку выше, а не ниже

ответ

Смежные вопросы