How to use float without flipping floated item and changing in source order? Is this possible?

问题

See this example to understand

http://jsbin.com/ocewu

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

This is code of example

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

回答1:

One Additional Div to the Mix?

If you can edit your CMS template, wrap them in one additional div, and float that div: 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 can't make even a minor change like that to the Code, you could re-order these with Javascript once the page finishes loading.

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

Absolute Positions - Yuck.

The last option (and I shudder to even call it an option) is to absolutely position each of the divs, being sure to set their parent container position to relative*. This option would require you to return and make changes to your .css file each time you add a new box, which is unfortunate.

^{* If you cannot set rules for their parent, or a parent of the same dimensions, then this option is removed from the table as absolute positioning will default to the viewport, which isn't what you want.}

回答2:

Good alternative for ordering html elements is to convert them to inline blocks (if they aren't already) and then use text-alignment for wrapping element:

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

In your case a tag inline-block by default so there is no need to assign display:inline-block to it. Common elements like span and img are also inline-blocks by default.

回答3:

That's not possible. See: http://www.dynamicdrive.com/forums/showthread.php?t=28936

回答4:

Is there a reason that you are not flipping the order of A and B? When you float something right with text the order gets inverted.

来源：https://stackoverflow.com/questions/2049608/how-to-use-float-without-flipping-floated-item-and-changing-in-source-order-is

标签

css

xhtml

css-float