0

Имея консткрукцию такого вида нужно поменять местами дивы (так, чтобы было 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}

2 ответа 2

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>

1
  • прекрасно! все работает, спасибо! Commented 18 окт. 2016 в 9:56
-2
.fl {float:left}
.fr {float:right}
.no {float:none}
.oh {overflow:hidden}
.wrap{
    display: table;
    clear: both;
}
1
  • Пожалуйста, постарайтесь писать более развернутые ответы. Уверен, автор вопроса был бы благодарен за ваш экспертный комментарий к приведенному выше коду. Commented 18 окт. 2016 в 10:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.