0

そのため、アプリにコメントがあります。問題は、コメントのコンテンツが3行になると、他の行のように開始するのではなく、ユーザーの画像の下に折り返されることです。私は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宣言を削除できます。

asidePSここでは実際に使用するべきではありません。これはこのような目的を意図したものではなく、一部の古いブラウザを混乱させるだけです。div代わりに使用してください。

于 2013-02-12T08:19:09.187 に答える