css替代js解决方案，html以错误的顺序使用float

Question

我的框架以错误的顺序为我的布局吐出html。我可以改变它，但对于其他媒体，订单是正确的。目前我有一个简单的javascript线来传输HTML，但我想知道是否有一个css替代。

这是简单的exaple。第一个例子是它应该如何工作，第二个例子是我现在拥有的。我想知道在第二个例子中是否可以完成相同的布局，所需的版本没有使用javascript

http://jsfiddle.net/SPgyA/1/

<div id="wrap">
    <div id="right" class="somediv">
        div right, dont know height in advance
    </div>
    <div id="main">
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
    </div>
</div>


<div id="desired_wrap">
      <div id="desired_main">
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
    </div>
    <div id="desired_right" class="somediv">
        div right, dont know height in advance
    </div>
</div>

javascript：

$("#desired_right").prependTo("#desired_wrap");

css

#wrap,#desired_wrap{
    width:200px;
    margin:10px;
    padding:10px;
    border:1px dashed grey;
}
#right{
    float:right;
}

#desired_right{
    float:right;
}


.somediv{
    color:red;
    width:100px;
    background-color:#eee;
}

Answer 1

通过添加一个小的额外html属性来实现仅使用CSS处理此并且不更改HTML顺序的方法*：

* 在我看来，这只是实现这项工作的可能方式，因为w3c指定的浮动行为在不添加至少一个html属性的情况下无法以这种方式工作。 < / p>

HTML

<div id="desired_wrap">
    <div id="desired_main" data-placeholder="my box text">
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
        main text, dont know height in advance<br />   
    </div>
    <div id="desired_right" class="somediv">
        my box text
    </div>
</div>

现在，我们将data-placeholder的文字通过#desired_main放在#desired_right之前，通过:before css属性。

这样，生成元素的高度将与#desired_wrap{ width:200px; padding:10px; position: relative; } .somediv { width: 100px; } #desired_main:before { content: attr(data-placeholder); float: right; width: 100px; }​ 的高度完全相同，因为它们包含相同的文本。

CSS

#desired_right

将#desired_right{ position: absolute; top: 10px; right: 10px; } 绝对定位到右上方，将模拟右浮动，就像在您的第一个工作示例中一样：

CSS

{{1}}

适用于：

• Internet Explorer 8 +
• Firefox 3.6
• Chrome 17 +
• Safari 5 +

现场演示：content

Answer 2

如果要将内部.somediv对齐到右上角，则需要添加位置：relative和absolute

#wrap,#desired_wrap{
    position:relative;
}

.somediv{
    position:absolute;
    top:0px;
    right:0px;
}

编辑：

刚才意识到，通过这种改变，文本不再在div周围流动......