Поменять местами div используя только float

381

26 ноября 2016, 18:50

Имея консткрукцию такого вида нужно поменять местами дивы (так, чтобы было 213 и 312) используя только св-ва float. Дополнительные обертки не допускаются.

HTML

<div class="wrap oh">
    <div class="test fl">1</div>
    <div class="test fl">2</div>
    <div class="test fl">3</div>
</div>

СSS

.fl {float:left}
.fr {float:right}
.no {float:none}
.oh {overflow:hidden}

Answer 1

.fl {float:left} 
.fr {float:right} 
.no {float:none} 
.oh {overflow:hidden} 
.wrap{ 
	width: 30px; 
} 
.test{ 
	display: inline-block; 
}

<div class="wrap oh"> 
    <div class="test ">1</div> 
    <div class="test fr">2</div> 
    <div class="test fl">3</div> 
</div>

если добавить инлайн, то тогда можно крутить баранку

.fl {float:left} 
.fr {float:right} 
.no {float:none} 
.oh {overflow:hidden} 
.wrap{ 
	width: 30px; 
} 
.test{ 
	display: inline-block; 
}

<div class="wrap oh"> 
    <div class="test ">1</div> 
    <div class="test fl">2</div> 
    <div class="test fr">3</div> 
</div>

или только так, по другому обтекания не позволяют выполнить такого

.fl {float:left} 
.fr {float:right} 
.no {float:none} 
.oh {overflow:hidden} 
.wrap{ 
	width: 30px; 
}

<div class="wrap oh"> 
    <div class="test fr">1</div> 
    <div class="test no">2</div> 
    <div class="test fr">3</div> 
</div>

.fl {float:left} 
.fr {float:right} 
.no {float:none} 
.oh {overflow:hidden} 
.wrap{ 
	width: 30px; 
}

<div class="wrap oh"> 
    <div class="test fl">1</div> 
    <div class="test no">2</div> 
    <div class="test fl">3</div> 
</div>

Answer 2

.fl {float:left}
.fr {float:right}
.no {float:none}
.oh {overflow:hidden}
.wrap{
    display: table;
    clear: both;
}

Создание интернет-магазина кофе и чая в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

html5 video ширина ролика

каким образом можно растянуть html5 видео? оно сохраняет пропорциивидел вариант с

408

CSS

Верстка: main и aside во всю высоту страницы

Подскажите, как растянуть блоки на всю высоту страницы?

449

CSS

Bootstrap Carousel

В общем, загвоздка такаяИзображения из слайдера и переключатели (черные метки, при клике на которые сменяется картинка) не показываются в мобильном...

423

CSS

Увеличить поле text в форме html

Добрый деньНе могу понять почему не работает

323