Как использовать float без переворачивания плавающего элемента и изменения в исходном порядке?Это возможно? - PullRequest
Новая
       19

Как использовать float без переворачивания плавающего элемента и изменения в исходном порядке?Это возможно?

4 голосов
/ 12 января 2010

См. Этот пример, чтобы понять

http://jsbin.com/ocewu

альтернативный текст http://easycaptures.com/fs/uploaded/212/8042227539.png

Это пример кода 

<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }

div {width:300px;height:42px;border:2px solid red}
a{border:2px solid blue;padding:10px}
div a {float:right}
#div2 a {float:left}

</style>
</head>
<body>

I need positioning in right like this

<p>div a {float:right}</p>

<div >
  <a>A</a>
  <a>B</a>
</div>

but element order like this without changing in HTML code

<div id="div2">
  <a>A</a>
  <a>B</a>

</div>

Ответы [ 4 ]

9 голосов
/ 12 января 2010

Один дополнительный Div к миксу?

Если вы можете редактировать свой шаблон CMS, оберните их в один дополнительный div и поместите этот div: http://jsbin.com/esoqe

div.els { float:right }

<div class="main"> 
  <div class="els"> 
    <a>A</a> 
    <a>B</a> 
  </div> 
</div>

Исправления JQuery Все

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

$(function(){
  // create previous hierarchy
  $("div.main").wrapInner("<div class='els'></div>");
});

Абсолютные позиции - гадость.

Последний вариант (и я даже не могу назвать его параметром) - это абсолютное позиционирование каждого из элементов div, при этом обязательно установите для позиции родительского контейнера значение relative*. Эта опция потребует, чтобы вы возвращались и вносили изменения в ваш файл .css каждый раз, когда добавляете новое поле, что вызывает сожаление.

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

1 голос
/ 03 декабря 2014

Хорошая альтернатива для упорядочивания html-элементов - преобразовать их во встроенные блоки (если их еще нет), а затем использовать выравнивание текста для переноса элемента:

HTML: 

<div class="wrapper">
  <div class="element-to-align">Align me</div>
  <div class="element-to-align">Align me</div>
</div>

CSS: 

.wrapper{
  text-align:right;
}

.element-to-align{
  text-align: left; // if you want still align text to left within the element.
  display: inline-block;
}

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

0 голосов
/ 12 января 2010

Есть ли причина, по которой вы не переключаете порядок A и B? Когда вы перемещаете что-то прямо с текстом, заказ переворачивается.

0 голосов
/ 12 января 2010

Это невозможно. Смотри: http://www.dynamicdrive.com/forums/showthread.php?t=28936

...