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

Question

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

这是一个简单的例子。第一个例子是它应该如何工作，第二个是我现在拥有的。我想知道是否可以在第二个示例中完成相同的布局，即不使用 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

这里是仅使用 CSS 且不更改 HTML 顺序的处理方式，方法是添加一个额外的小 html 属性*:

*在我看来，这是实现这项工作的唯一可能方法，因为 w3c 指定的 float 行为如果不至少添加一个 html 属性，就无法以这种方式工作。

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>

现在，我们通过 :before 放置来自 data-placeholder 的文本, 在 #desired_main 之前通过 content css 属性。

这样，生成的元素的高度将与 #desired_right 的高度完全相同，因为它们包含相同的文本。

CSS

#desired_wrap{
    width:200px;
    padding:10px;
    position: relative;
}

.somediv {
    width: 100px;
}

#desired_main:before {
    content: attr(data-placeholder);
    float: right;
    width: 100px;
}​

将 #desired_right 绝对定位到右上角，将模拟向右浮动，就像在您的第一个工作示例中一样:

CSS

#desired_right{
    position: absolute;
    top: 10px;
    right: 10px;
}

适用于:

• Internet Explorer 8+
• 火狐 3.6
• Chrome 17+
• Safari 5+

现场演示:http://jsfiddle.net/SPgyA/3/