CSS保證金頂部由同級元素沒有父

我有這個網站CSS保證金頂部由同級元素沒有父

<div class="ChatDiv"> 
    <div class="chatdiv_ fm"> 
      <span>uhygtfgyhujiuhygt i uytr yui jhuygtfr</span> 
    </div> 
    <div class="chatdiv_ fm" style="margin-top:148;"> 
      <span>t</span> 
    </div> 

<div class="chatdiv_ fm" style="margin-top:214;"> 
         <span>t</span> 
      </div> 
    </div>

而這個CSS

.ChatDiv{ 
    width: 800px; 
    height: 480px; 
    overflow: auto; 
    margin-left: 350px; 
    border-radius: 4px; 
    background: white; 
    margin-top: 80px; 
    position: absolute; 
    box-shadow: 0px 0px 11px black; 
} 
.fm{ 
    position: relative; 
    font-family: Nbutler; 
    font-size: 20px; 
    float: right; 
    background: #2196f3; 
    max-width: 400px; 
    color: white; 
    margin-left: -432px; 
    margin-right: 20px; 
    padding: 10px; 
    border-radius: 5px; 
    span{ 
     display: block; 
     height: auto; 
     width: auto; 
     max-width: 400px;  
    } 
}

而問題是，當我有餘量頂部上fm元素需要這個利潤率從頂部。不從兄弟元素和我不會有多少fm元素我會有，所以我不能把所有fm元素相同的margin-top

來源

2016-07-26 COp

一個在的jsfiddle/jsbin減少例子就是幫助很多......你有很多不必要的（和格式錯誤）的代碼，這使得它不必要的困難我們幫你... – MattDiMu

我創建了一個簡單的例子，你可以找到有用的：http://codepen.io/karlisup/pen/RRJGBJ – karlisup

添加示例利潤由兄弟姐妹計算。

.container{ 
 
\t width: 500px; 
 
\t height: 300px; 
 
\t margin: 16px auto; 
 
\t padding: 16px; 
 
\t 
 
\t border-radius: 6px; 
 
\t border: 1px solid black; 
 
} 
 

 
.list { 
 
\t box-sizing: border-box; 
 
\t padding: 16px; 
 
\t float: right; 
 
\t width: 50%; 
 
\t height: 100%; 
 
\t background-color: tomato; 
 
} 
 
.list__elem { 
 
\t box-sizing: border-box; 
 
\t width: 100%; 
 
\t height: 42px; 
 
\t margin-bottom: 16px; 
 
\t padding-left: 16px; 
 
\t 
 
\t border: 1px solid olive; 
 
\t line-height: 40px; 
 
}

<div class="container"> 
 
\t <ul class="list"> 
 
\t \t <li class="list__elem">Elem 1</li> 
 
\t \t <li class="list__elem">Elem 2</li> 
 
\t \t <li class="list__elem">Elem 3</li> 
 
\t \t <li class="list__elem">Elem 4</li> 
 
\t </ul> 
 
</div>

我認爲，內聯保證金風格和缺乏元素分組使得它很難理解的例子。

祝你好運;）

來源

2016-07-26 22:31:58 karlisup

如果你想使用絕對位置，那麼它會發生的事情，因爲它會一個DIV，它具有相對的邊界位置，絕對你的div位置正好「不退出「。

這些div不需要使用position: absolute。只要刪除浮動，位置，利潤率，你會很好去。

的jsfiddle：https://jsfiddle.net/sey4121b/

來源

2016-07-26 22:37:27

隨着chatdiv的絕對位置，它會影響標題 – COp

哦。好的，給我一分鐘。 –

你可以粘貼一個jsFiddle url與你的完整的當前代碼？這會更容易。也可以使用'：first-child'，然後將其設置爲'position：relative'。我真的需要你當前的代碼的副本。 –

CSS保證金頂部由同級元素沒有父

回答

相關問題