消息列表浮動/箭頭問題

我正在嘗試創建一個將顯示消息的列表。下面的圖片是我想要的。檢查codepen它的外觀以現在!:消息列表浮動/箭頭問題

正如你可以看到除了UI的跳起來，因爲它利用浮動。我不能在頭像紅色區域設置固定高度，因爲消息區域的高度可能有所不同（基本上，整個消息的大小可能會有所不同）。我已經通過刪除文本容器上的浮動來實現它，但是我無法將綠色箭頭排列在後面。有任何想法嗎？

Hree是codepen code爲你搗鼓！

HTML：

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="center"> 
     <ol id="holder" class="scroll" style="background:pink;"> 
      <li class="message"> 
       <div class="thumb-fav-container"> 
       <div class="thumb-fav-row"> 
        <div class="thumb"> 
        </div> 
        <div class="thumb-fav-num"> 
        1000 
        </div> 
       </div> 
       <div class="thumb-fav-row"> 
        <div class="fav"> 
        </div> 
        <div class="thumb-fav-num"> 
        0 
        </div> 
       </div> 
       </div> 
       <div class="message-avatar-container"> 
        <div class="message-avatar"> 
        </div> 
       </div> 
       <div class="text-container"> 
       message 
       <br>1 
       <br>2 
       <br>3 
       <br>4 
       <br>5 
       <br>6 
       <br>6 
       <br>6 
       <br>6 
       <br>6 
       <br>6 
       <br>6 
       <br>6 
       </div> 
       <div class="text-arrow"> 
       </div> 
      </li> 


         <li class="message"> 
       <div class="thumb-fav-container"> 
       <div class="thumb-fav-row"> 
        <div class="thumb"> 
        </div> 
        <div class="thumb-fav-num"> 
        1000 
        </div> 
       </div> 
       <div class="thumb-fav-row"> 
        <div class="fav"> 
        </div> 
        <div class="thumb-fav-num"> 
        0 
        </div> 
       </div> 
       </div> 
       <div class="message-avatar-container"> 
        <div class="message-avatar"> 
        </div> 
       </div> 
       <div class="text-container"> 
       message 
       <br>1 
       <br>2 
       <br>3 
       <br>4 
       </div> 
       <div class="text-arrow"> 
       </div> 
      </li> 


     </ol> 
     </div> 
    </body> 

</html>

CSS：

/* Styles go here */ 

div.center 
{ 
    max-width: 1200px; 
    width: 1000px; 
    min-width:800px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

ol { 
    list-style-type: none; 
    padding: 0em; 
    margin: 0em; 

} 

li { 
    display: inline; 
    margin: 0em; 
    padding: 0em; 
    left: 0em; 
} 

message { 
    background: red; 
    width: 100%; 
    height: auto; 
} 

div.thumb-fav-container { 
    margin-top: 20px; 
    float:left; 
    padding:10px; 
    width:70px; 
    background: lime; 
} 

div.thumb-fav-row { 
    height:20px; 
    margin-left:5px; 
    margin-bottom:5px; 
    background: silver; 
} 

div.thumb { 
    float:left; 
    width:20px; 
    height:20px; 
    background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png'); 
    background-size: contain; 
} 

div.fav { 
    float: left; 
    width:20px; 
    height:20px; 
    background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png'); 
    background-size: contain; 
} 

div.thumb-fav-num { 
    float: left; 
    margin-left:10px; 
    text-align: center; 
    background: pink; 
} 

div.text-container { 
    float:left; 
    margin-left:10px; 
    margin-top: 10px; 
    width:700px; 
    padding:20px; 
    background: silver; 
} 

div.text-arrow { 
    margin-top:20px; 
    float:left; 
    width: 0; 
    height: 0; 
    border-bottom: 30px solid transparent; 
    border-left: 30px solid lime; 
    border-top: 30px solid transparent; 
} 

div.message-avatar-container { 
    float:right; 
    padding:10px; 
    margin-top: 20px; 
    width:100px; 
    height:70px; 
    background: red; 
} 

div.message-avatar { 
    float:left; 
    width:50px; 
    height:50px; 
    background-image:url('http://findicons.com/files/icons/1072/face_avatars/300/a04.png'); 
    background-size: contain; 
}

來源

2015-11-08 Karl Morrison

它給我你真正想達到什麼完全不清楚。請提供它應該是什麼樣子的圖像。 – connexo

@connexo紅色區域左下方的綠色區域應該位於左側。我認爲這很清楚。我會更新它。 –

@connexo更新。我很驚訝，你不知道我的意思... –

小錯誤在你的CSS：

相反的：

message { 
    background: red; 
    width: 100%; 
    height: auto; 
}

你應該有：

.message { 
    clear:both; 
    float:left; 
    height: auto; 
}

這將產生預期的輸出（demo）：

來源

2015-11-08 21:59:58

爲什麼要在同一元素上應用'width：100％;'和'float：left;'？ – connexo

@connexo只需快速修復他的代碼。不介意他的其他CSS（國際海事組織，他應該修正自己的邏輯） –

@ Jean-Paul事實上，我的代碼很髒，但是需要一些快速的atm。（我將導入代碼並在稍後用sass重寫） –

消息列表浮動/箭頭問題

回答

相關問題