div出现在|之前元件

Question

在这个小提琴中：http://jsfiddle.net/thbuf/110/

div“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

这是因为两个元素都有float: right。这使得它们就像从屏幕的右侧堆叠起来一样，因此文档顺序中的第一个元素成为右边的第一个元素，后面跟着第二个元素。

要反转它们，您只需要颠倒顺序。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

<div style="float:right">

追随工作小提琴：here