All geek questions in one place

How to use float without flipping a floating element and changing in source order? Is it possible?

See this example to understand.

http://jsbin.com/ocewu

alt text http://easycaptures.com/fs/uploaded/212/8042227539.png

This is an example code.

<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>
+3
source share
4 answers

One extra div in the mix?

If you can edit your CMS template, wrap them in one additional div and put the div there: http://jsbin.com/esoqe

div.els { float:right }

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

JQuery fixes everything

If you cannot make minor changes to the code, you can reorder them using Javascript after the page has finished loading.

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

Absolute Positions - Yuck.

( , ) - div, relative *. .css , .

* , , , , .

+9

html ( ), wrapper:

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;
}

, : . , span img, .

+1

Is there a reason you are not reversing the order of A and B? When you float something directly with the text, the order is inverted.

0
source

Source: https://habr.com/ru/post/1728178/

More articles:


All Articles