浮動元素的父元素不在正確的位置

我正在使用rem來創建一個移動web項目。現在我面臨一個問題。浮動元素的父元素不在正確的位置

我的代碼如下：

<head> 
<style type="text/css"> 
     body { 
       background-color: green; 
      } 

     #top { 
      /*height: .9rem;*/ 
     } 

     #top::after, 
     #top::before { 
      /*content: ''; 
      display: block; 
      clear: both; 
      visibility: hidden;*/ 
     } 

     ul { 
      list-style: none; 
      padding-left: 0; 
     } 

     #data-item { 
      margin-top: 4rem; 
     } 

     #data-item .image-list { 
      width: 4.5rem; 
      display: flex; 
      flex-flow: row wrap; 
      background-color: yellow; 
     } 

     #data-item .image-list .image-list .div-image { 
      width: 1.4rem; 
      height: 1.4rem; 
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: cover; 
      background-color: #6641E2; 
     } 
    </style> 
</head> 

<body> 
    <script src="js/mui.min.js"></script> 
    <script type="text/javascript"> 
     mui.init() 
    </script> 
    <section id="top"> 
     <div id="addImage" style="height: .90rem; width: 1.60rem; float:right ; padding-top: .20rem; position: relative;background-color: red; z-index: 999;"> 
      <span style="display: inline-block; margin-right: .20rem;">ADD</span> 
     </div> 
    </section> 
    <section id="data-item"> 
     <ul class="mui-table-view"> 
      <li class="mui-table-view-cell"> 
       <div class="title"><img src="images/vip.png" alt="" /><span class="date">6月１日</span></div> 
       <p class="item-description"></p> 
       <ul class="image-list"> 
        <li> 
         <div class="div-image"></div> 
        </li> 
        <li> 
         <div class="div-image"></div> 
        </li> 
        <li> 
         <div class="div-image"></div> 
        </li> 
        <li> 
         <div class="div-image"></div> 
        </li> 

       </ul> 
      </li> 
      <li class="mui-table-view-cell">Item 2</li> 
      <li class="mui-table-view-cell">Item 3</li> 
     </ul> 
    </section> 
</body>

我期待的結果在Chrome控制檯，我選擇移動設備iPhone5的。屏幕是這樣的：

我檢查的Elements選項卡中的元素。
我看到#topsection是320 * 0。
我的問題是爲什麼#addImagediv也有margin-top。我爲#data-itemsection設置了margin-top？

爲什麼紅色的div在右上角？

來源

2017-08-12 jiexishede

在最前一頁視圖，你沒有關閉「addImage」分區。有時使用驗證器可以幫助你解決這個問題。 [鏈接]（https://validator.w3.org/） – Triby

@Triby是的，我有一個漏洞。 – jiexishede

無論問題是否解決，爲什麼span內的「addImage」div？你可以設置填充來「定位」文本。 – Triby

這種風格添加到父：

#top{ overflow: auto; }

來源

2017-08-12 12:50:28

浮動元素的父元素不在正確的位置

回答

相關問題