Плавать следующим братом слева от предыдущего брата

Я не знаю, как это сделать или сделать это с помощью Internet Explorer 6.

Я пытаюсь плавать следующим братом слева от предыдущего брата

Это то, что я делаю, и он корректно отображает хром 6, опера 9 и firefox 1 +.

Какая проблема с IE6 заключается в том, что previous (2) перемещается в крайнее правое положение (где лучше всего находиться рядом с next (1), который находится в левой части страницы.

 .wrap{float:left;}
 .prev {float:right;}
 .next {float:left;}


 <div class="wrap">
 <div class="prev">previous (2)</div><div class="next">next (1)</div>
 </div>

Если это можно сделать, и вы знаете, как это сделать, я дам бонус в 250 очков.

Ответы

Ответ 1

Здесь вы найдете: http://result.dabblet.com/gist/2489753

Вы не можете использовать поплавки там, потому что IE имеет неприятную ошибку, где он растягивает контейнер, который плавает влево (или есть inline-block), если он содержит float: right;.

Однако существует редко используемое свойство direction, которое можно использовать для таких макетов: он полностью кросс-браузер, и вы можете использовать его с inline-block для лучшего эффекта.

Итак, для вашего случая код будет следующим:

.wrap{
    display: inline-block;
    direction: rtl;
    }
.prev,
.next {
    display: inline-block;
    direction: ltr;
    }

Но display: inline-block не работает для IE из коробки, поэтому вам нужно взломать его, сделав его встроенным, но с hasLayout, поэтому добавьте их в IE только в условных комментариях:

.wrap,
.prev,
.next {
    display: inline;
    zoom: 1;
    }

Что это!

Шаг за шагом:

  • Сделать все встроенные блоки, поэтому он будет работать в поточном потоке.
  • Переверните поток на обертке.
  • Возвратите поток в нормальный режим ltr для детей.
  • Сделано:)

Ответ 2

Я не могу вспомнить, работает ли этот трюк в IE6.

.wrap{float:left;}
.next {float:left;}
.prev {overflow:hidden}

Я не думаю, что вам понадобится .wrap{float:left;}

<div class="wrap">
    <div class="next">next (1)</div>
    <div class="prev">previous (2)</div>
</div>

Этот способ .prev получает ширину, оставшуюся после плавания .left.

Демонстрации:

С плавающей оболочкой: http://jsbin.com/exevis

Без плавающей упаковки: http://jsbin.com/opehig

Ответ 3

Просто имейте в виду, что свойство direction предназначено для указания направления текста для таких языков, как иврит, в отличие от размещения контента. В то время как ответ kizu очень умный, имея дело с чудовищностью ie6, я рекомендую вам обернуть его в условном выражении и обязательно задокументировать взломать, даже если вы единственный разработчик на странице. Все, что требуется, - это пару месяцев и, возможно, несколько мартини для загрузки, и эта реализация окажется весьма бессмысленной.