Изменение порядка плавали дивы с CSS

JSFIDDLEИзменение порядка плавали дивы с CSS

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

В состоянии по умолчанию они имеют ширину 50%, и они находятся рядом друг с другом.

Размер экрана 600px (или w/e не имеет значения) Я хочу, чтобы второй div (красный) плавал над первым div (желтый).

Как это возможно с помощью только CSS-решения?

HTML

<div class="yellow"></div> 
<div class="red"></div>

CSS

.yellow { 
    background: yellow; 
    width: 50%; 
    height: 300px; 
    float:left; 
} 

.red { 
    background: red; 
    width: 50%; 
    height: 300px; 
    float:left; 
} 

@media screen and (max-width:600px) { 
    .yellow { 
     background: yellow; 
     width: 100%; 
     height: 300px; 
     float:left; 
    } 

    .red { 
     background: red; 
     width: 100%; 
     height: 300px; 
     float:left; 
    } 
}

Решение, которое я хочу это:

RED Див

YELLOW ДИВ

но теперь это:

ЖЕЛТЫЙ Див

RED DIV

источник

2014-09-07 vaskort

[This] (http://jsfiddle.net/uh7zLphk/1/) - это немного другой подход, но имеет изменения в HTML. – Harry

Ницца, но вы получите только «почувствовать», что они плавают: осталось только в том случае, если они имеют ширину 50%. Я буду менять пиксели каждого из них на фиксированное значение. – vaskort

Правда, что. [Это] (http://jsfiddle.net/uh7zLphk/11/) - еще один возможный подход. – Harry

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

Насколько я знаю, единственный хороший способ добиться этого с помощью чистого HTML/CSS - использовать новый flexbox spec (хорошей отправной точкой, вероятно, будет this css tricks article).

При использовании Flexbox вы можете использовать order собственность на предметы, чтобы диктовать, какой порядок появляются элементы в (Дух)

Вы можете увидеть пример этого в действии here, то HTML код похож на то, что у вас есть , с добавлением элемента обертки (я также установил декларацию DOCTYPE):

<!DOCTYPE html> 
<div class="wrapper"> 
    <div class="yellow"> 
    </div> 
    <div class="red"> 
    </div> 
</div>

CSS-немного отличается:

.wrapper { 
    display: flex; 
    flex-flow: row wrap; 
} 

.yellow { 
    background: yellow; 
    width: 20%; 
    height: 300px; 
} 

.red { 
    background: red; 
    width: 20%; 
    height: 300px; 
} 

@media screen and (max-width:600px) { 
    .yellow { 
     order: 2; 
     width: 100%; 
    } 

    .red { 
     order: 1; 
     width: 100%; 
    } 
}

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

Единственным недостатком является то, что он в настоящее время работает только на около 80% браузеров в письменной форме:

http://caniuse.com/#search=flexbox

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

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

источник

2014-09-07 13:38:05 Sean

Попробуйте изменить свой

HTML для этого -

<div class="container"> 
    <div class="yellow"></div> 
    <div class="red"></div> 
</div>

и ваш CSS @media запросов к это -

@media screen and (max-width:600px) { 
.container{ 
    display:flex; 
    flex-direction: column-reverse; 
} 
.yellow { 
    background: yellow; 
    width: 100%; 
    height: 300px; 

} 

.red { 
    background: red; 
    width: 100%; 
    height: 300px; 


} }

источник

2014-09-07 13:37:20

Да. Это точный ответ, как подход только CSS. – Christina

Это простое решение с использованием отрицательных полей и поплавков.

Для CSS, используйте следующее:

@media screen and (max-width:600px) { 
    .yellow { 
     background: yellow; 
     width: 100%; 
     height: 300px; 
     float:left; 
     margin-top: 300px; 
    } 

    .red { 
     background: red; 
     width: 100%; 
     height: 300px; 
     float:left; 
     margin-left: -100%; 
    } 
}

Ваш HTML остается такой же, как вы писали.

Добавить верхнюю границу до .yellow, используя margin-top: 300px (равный высоте красный div).

Для красного div добавьте отрицательное левое поле 100%.

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

Трюк аналогичен трюку, используемому для дизайна макета с 3 колонками Святого Граила.

См демо: http://jsfiddle.net/audetwebdesign/jux84wzk/

источник

2014-09-07 13:53:57

До сих пор нет никаких мобильных первые ответы, что является меньше строк CSS, и другие преимущества. Это касается html, так что это не вопрос OP, поскольку подход только для CSS - это ответ Flexbox от двух других подглядываний, которые я проголосовал.

DEMO: http://jsfiddle.net/mhrf6d4n/

HTML, положить в исходном порядке наименьшего видовом первого:

<div class="red"></div> 
<div class="yellow"></div>

CSS (поставить общий, глобальный для всех видовых вне запросов СМИ, объединить общие селекторы, затем после того, как положить минимальную ширину и разместить свои поплавки)

.yellow, .red { 
    background: yellow; 
    height: 300px; 
} 
.red { 
    background: red; 
} 

@media screen and (min-width:600px) { 
    .yellow, .red { 
     float:left; 
     width:50%; 
    } 
}

источник

2014-09-07 17:45:36 Christina

Проблема с мобильным первым CSS заключается в том, что, будучи «более приятным» и «более эффективным», он испортил стили для IE8- (IE8 игнорирует любые css внутри медиа-запроса) – Sean

response.js, используя его с 2011 года. когда вы действительно не хотите загружать маленьких пользователей в виде визитных карточек с большими видовыми стилями и фоновыми изображениями, которые огромны. – Christina

Интересно, что я не слышал об этом раньше (хотя кажется, что полифония существует для чего угодно, так что это имеет смысл). Похоже, я сначала кодирую свой мобильный сайт :) спасибо! – Sean

Изменение порядка плавали дивы с CSS

ответ

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