消息列表浮动/箭头问题

我正在尝试创建一个将显示消息的列表。下面的图片是我想要的。检查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重写） –

消息列表浮动/箭头问题

回答

相关问题