div 出现在 | 之前元素

Question

在此 fiddle 中：http://jsfiddle.net/thbuf/110/

div "test" 出现在 | 之前元素。尽管在 | 之后添加了 "test"，但这种情况仍在发生。 . css 有问题吗？

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
  /*table, tbody, tfoot, thead, tr, th, td*/
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
}

html, body {
  height: 100%;
  background-color:#333;
  color:#CCC;
  font-family:Myriad Pro, Verdana;
}

#container {
  position: relative;
  min-height: 100%;
  height: 100%;
  height: auto;    
}
html>body #container {
  height: auto;
}

#page{
  padding:0 0 100px 0;   
}

#content{
  padding:15px;   
}
#content h1{
  font-size:3em;   
}

#footer {
  position: relative;
  bottom:0;
  width: 100%;
  background-color:#CCC;
  color:#333;
  padding:20px;
}

<div id='container'>

  <div id='page'>
    <div id='content'>
      <h1>title</h1>
      <p>some content would go here</p>
      <p>Loet consectetur elementum, faucibus in nulla.</p>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
    </div>
  </div>

  <div id='footer'>
    <div style="display: inline">here is your footer</div>
    <div style="display: inline; float:right;">|</div>
    <div style="display: inline; float:right">test</div>
  </div>

</div>

Answer 1

只需添加新 div 以包含子 div，如下所示：

<div style="float:right">

工作落后fiddle：here

Answer 2

那是因为两个元素上的 float: right。这使得它们的行为就好像它们是从屏幕的右侧堆叠起来的，因此文档顺序中的第一个元素成为从右边开始的第一个元素，然后是第二个元素。

要反转它们，只需反转顺序即可。

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    /*table, tbody, tfoot, thead, tr, th, td*/
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
}

html, body {
    height: 100%;
    background-color:#333;
    color:#CCC;
    font-family:Myriad Pro, Verdana;
}

#container {
    position: relative;
    min-height: 100%;
    height: 100%;
    height: auto;    
}
html>body #container {
    height: auto;
}

#page{
     padding:0 0 100px 0;   
}

#content{
     padding:15px;   
}
#content h1{
    font-size:3em;   
}

#footer {
    position: relative;
    bottom:0;
    width: 100%;
    background-color:#CCC;
    color:#333;
    padding:20px;
}

<div id='page'>
  <div id='content'>
    <h1>title</h1>
    <p>some content would go here</p>
    <p>Loet consectetur elementum, faucibus in nulla.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
  </div>
</div>

<div id='footer'>
  <div style="display: inline">here is your footer</div>
  <div style="display: inline; float:right">test</div>
  <div style="display: inline; float:right">test</div>

</div>

div 出现在 | 之前元素

div appearing before | element

css

css-float