div出现在|之前元件 [英] div appearing before | element

问题描述

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

divtest出现在|之前元件。这是发生，尽管测试添加在|之后。 css有问题吗？

 < div id = '> < div id ='page'> < div id ='content'> < h1> title< / h1> < p>部分内容会显示在这里< / p> < p> Loet consectetur elementum，nulla中的faucibus。< / 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>这里是您的页脚< / div> < div style =display：inline; float：right;> |< / div> < div style =display：inline; float：right> test< / div> < / div>< / div>  

解决方案

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

  html，body，div，span，object，iframe，h1，h2 ，h3，h4，h5，h6，p，blockquote，pre，a，abbr，首字母缩略词，地址，代码，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;轮廓：0; font-weight：inherit; font-style：inherit; font-size：100％; font-family：inherit;} html，body {height：100％; background-color：＃333;颜色：#CCC; font-family：Myriad Pro，Verdana;}＃container {position：relative; min-height：100％;高度：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;颜色：＃333; padding：20px;}  

 < div id = '> < div id ='content'> < h1> title< / h1> < p>部分内容会显示在这里< / p> < p> Loet consectetur elementum，nulla中的faucibus。< / 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>这里是您的页脚< / div> < div style =display：inline; float：right> test< / div> < div style =display：inline; float：right> test< / div>< / div>  
 
In this fiddle : http://jsfiddle.net/thbuf/110/

The div "test" is appearing before the | element. This is occurring despite that the "test" is added after | . Is there an issue with 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>



解决方案
That is because of the float: right on both the elements. This makes them act as though they are stacked from the right side of the screen and so the first element in the document order becomes the first from the right followed by the second element.

To reverse them, you just need to reverse the order.



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出现在|之前元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！