CSS 仅针对评论中的第一行

Question

所以我在我的应用程序中有评论，问题是一旦评论中的内容变成三行，它就会环绕在用户图片下方，而不是从其他行所在的位置开始。我对 CSS 很陌生，但似乎我应用的任何边距都只会移动第一行。

CSS:

#comment_border {
  border: 1px solid $grayLighter;
  border-radius: 3px;
  background-color: #d6e5f1;
  margin-left: 90px;
  padding: 2px;
}

.comment_info {
  display: block;
  margin-left: -20px;
  color: #767676;
}

#comment_content {
  /* dont know what to put here */
}

查看/评论:

<div class="row" id="comment_border">

<span class="comment_info">
  <aside class="span2">
    <%= link_to gravatar_for((comment.user), size: 35), comment.user %>
    <%= link_to comment.user.name, comment.user, id: "feedusername" %>
  </aside>
  <span id="comment_content"> <%= comment.content %> </span>
</span>

</div>

Answer 1

问题描述不完整(缺少必要的 CSS 等)，但主要问题似乎是您在内联元素上设置了左边距。使用给定的标记，以下 CSS 修改以一种似乎大致是什么意思的方式呈现它:

.comment_info {
  display: block;
  margin-left: 0px;
  color: #767676;
  /* margin-left:-20px; NOT set here */
}
#comment_content {
  margin-left: 90px;
  display: block;
}
.span2 { 
  width: 80px; 
  height: 35px; 
  float: left;
  border: solid 1px red;
 }

评论内容使用div元素而不是span会更符合逻辑；这样做，您可以删除 display: block 声明。

附言你真的不应该在这里使用 aside；它不是为了这样的目的，它只是混淆了一些旧的浏览器；请改用 div。