html - 乱序刷新 HTML

标签 html css css-float

是否可以乱序刷新 html 并让浏览器按顺序显示内容?我知道我可以在客户端利用 JS,但是否可以仅使用 CSS 来实现?

例如,如果我的 html 最终按以下顺序刷新:

<html><body>
  <div>3</div>
  <div>1</div>
  <div>4</div>
  <div>2</div>      
</body></html>

是否有我可以使用的任何 CSS,以便页面上显示的 html 是:

1
2
3
4

最佳答案

您可以使用表格作为可能的解决方案:http://jsfiddle.net/UJWP4/37/

<div class="wrapper">
    <div class="bottom">
        <div class="block">3</div>
    </div>
    <div class="top">
        <div class="block">1</div>
    </div>
    <div class="middle">
        <div class="block">2</div>
    </div>
</div>

.wrapper {
    display: table; 
    width: 100%; 
}
.top {
    display: table-header-group; 
}
.bottom {
    display: table-footer-group;
}
.middle{
    display:table-row-group;
}

但是,这可能仅限于 3 个部分,除非您可以摆弄它并获得更多申请。除此之外,我认为 js 是可行的方法

希望这对您有所帮助!

关于html - 乱序刷新 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27966802/

相关文章:

html - 当选择是最后一项时, float Div 无法正确换行

html - 占用剩余水平空间并在小屏幕上垂直堆叠的 Div

html - 最新的 Chrome : float inside of -webkit-column broken

javascript - 使用 jQuery 即时创建嵌套 DIV

javascript - <a> 来自签名模板网页表单字段的 href 信息未按预期工作

javascript - 滚动长度如何根据网页长度的增加而变化

jquery - Chrome 在 css 转换方面有问题吗?

javascript - jQuery 不适用于动态生成的相同 div

html - Chrome <音频> 播放速率

php - 确定广告是否显示以及是否被点击