浮动元素的父元素不在正确的位置

我正在使用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

浮动元素的父元素不在正确的位置

回答

相关问题