Question

我将PHP拉入表单并为实际消息添加了一些虚拟数据，这样我就可以搞错了。

我需要的答案是使用CSS，因为我倾向于使用不好的练习，而且可以帮助改进。

因此评论有图像，发件人姓名，发布日期和消息。我将在下面展示它的图像。

我遇到的唯一问题是我的长篇标签段落中的文字包含在div内，但文字低于评论（也显示在下方）。

关于如何有效地使评论框大小随文字增长，我能否提供一些提示。

这是我的代码：

% for comment in comments %}
<div id="comment-list">
   <div class="individual-comments">
       <div class="comment-user">
          Sent by: {{comment.senderName}} <br>
          <img src="{{ asset('img/no-user.png') }}" width="50px" height= "50px" alt="User Image">
       </div>                
       <div class="comment-desc">
          <p>Text messaging, or texting, is the act of composing and sending electronic messages</p>
       </div>                 
       <div class="comment-time">
          On: {{comment.dateCreated|date("m/d/Y")}}
       </div>
    </div>
</div>
{% endfor %}

.individual-comments {
  width: 700px;
  height: 80px;
  border: 0.5px solid #000000;
  margin: auto;
  text-align: left;
  position: relative;
  margin-bottom: 15px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 5px #000000;
}

.comment-desc {
  width: 613px;
  height: 50px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-size: 12px;
  color: #000000;
  padding-top: 50px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
}

.comment-time {
  text-align: left;
  float: right;
  padding: 5px;
  margin-right: 10px;
  color: #000000;
}

.comment-user {
  text-align: left;
  float: left;
  padding: 5px;
  color: #000000;
}

Answer 1

你的问题是你正在以错误的方式使用定位。

您的.comment-user课程为relative，您的.comment-time也是如此，但.comment-desc为absolute会导致混淆。

使用动态时，还应避免使用固定样式值元件。

.individual-comments上的固定高度会强制div从不调整大小。它与.comment-desc相同。

下面是一个更好的布局示例，使用display: flex作为容器。另一种解决方案是将float: left用于.comment-user，.comment-desc和.comment-time以及％宽度（类似于20％，70％，10％）。但同样，使用动态数据更适合适应性布局（flex也是如此）。

所有评论都是我留给演示的无用代码。

.individual-comments{
    width: 700px;
    /* height: 80px; useless */
    border: 0.5px solid #000000;
    margin: auto;
    text-align: left;
    position: relative;
    margin-bottom: 15px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 5px #000000;
    display: flex;
    flex-direction: row;
}

.comment-desc{
    /* width: 613px;
    height: 50px; */
    position: relative;
    /* bottom: 0px;
    right: 0px; */
    font-size: 12px;
    color: #000000;
    padding-top: 25px;
    padding-right: 10px;
    letter-spacing: 1px;
    /* text-overflow: ellipsis; */
    flex: 1;
}

.comment-time{
    text-align: left;
    float: right;
    padding: 5px;
    /* margin-right: 10px; */
    color: #000000;
    position: absolute;
    right: 10px;
}

.comment-user{
    text-align: left;
    float: left;
    padding: 5px;
    color: #000000;
}

<div id="comment-list">
   <div class="individual-comments">
       <div class="comment-user">
          Sent by: testuser <br>
          <img src="" width="50px" height= "50px" alt="User Image">
       </div>                
       <div class="comment-desc">
          <p>Text messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messages Text messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messages Text messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messagesText messaging, or texting, is the act of composing and sending electronic messages</p>
       </div>                 
       <div class="comment-time">
          On: date
       </div>
    </div>
</div>

编辑：

我在.comment-time上使用了一个位置：绝对允许注释文本占用所有正确的空间。如果我使用相对位置，.comment-desc将被.comment-time的宽度截断。

文本OverFlow与评论框

1 个答案:

编辑：