Question

我正在做包含聊天的网站。我有一个问题，为什么这些消息如此之高（.chat_msg）？

.chat_msg{
    position: relative;
    margin-top: 5px;
    width: 300px;

https://jsfiddle.net/d2swdxgy/

Answer 1

我用它修复了它：

.chat_msg {
  position: relative;
  margin-top: 5px;
  width: 300px;
  min-height: 50px;
}

.chat_msg img {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 5px;
  left: 5px;
}

你应该给<img />一个position: absolute而不是relative，并给父母一个min-height，以便<img />没有List::pop_front()。重叠。这就是我一直在做的事情。

小提琴：https://jsfiddle.net/praveenscience/d2swdxgy/3/

Answer 2

试试这个：）

https://jsfiddle.net/d2swdxgy/5/

修复了CSS

.chat_msg{
    position: relative;
    margin-top: 5px;
    width: 300px;
    clear: both;
}
.chat_msg img{
    width: 48px;
    height: 48px;
    margin: 5px;
    float: left;
}
.chat_msg_login{
    font-weight: bold;
    padding-top: 5px;
}
.chat_msg_msg{
    text-align: justify;
}
#chat{
    height: 400px;
    width: 300px;
    border-width:5px;
    border-style:dashed;
}
#chat_msgs_box{
    height:400px;
    overflow: auto;
    overflow-x: hidden;
}

Answer 3

.chat_msg {
  position: relative;
  margin-top: 5px;
  width: 300px;
  display:inline;
 }

 .chat_msg img {
   width: 100%;
   height: 100%;
 }

让它反应灵敏。

为什么这个div太大了？

3 个答案: