0

所以我在我的应用程序中有评论，问题是一旦评论中的内容变成三行，它会包裹在用户图片下方，而不是从其他行开始。我对 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>
4

1 回答 1

0

问题描述不完整（缺少基本的 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声明。

PS你不应该aside在这里使用；它不是为了这样的目的，它只会让一些旧浏览器感到困惑；改为使用div。

于 2013-02-12T08:19:09.187 回答