我的框架以错误的顺序为我的布局吐出 html。我可以更改它,但对于其他媒体,顺序是正确的。目前我有一行简单的 javascript 来传输 html,但我想知道是否有 css 替代品。
这是一个简单的例子。第一个例子是它应该如何工作,第二个是我现在拥有的。我想知道是否可以在第二个示例中完成相同的布局,即不使用 javascript 的所需版本
<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;
}
最佳答案
这里是仅使用 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+
关于html - Css 替代 js 解决方案,html 以错误的顺序使用 float,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11053480/