Question

我正在尝试创建一个显示消息的列表。下图是我想要实现的目标。检查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; 
}

Answer 1

CSS中的小错误：

而不是：

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

你应该：

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

这会产生预期的输出（demo）：

消息列表浮动/箭头问题

1 个答案: