0

ブログの投稿にコメントを入力するフォームを作成しましたが、コメントがWebページに表示されると、divに追加した背景色が大きくまたは小さくなります。以下のコードを提供しました。どんな助けでも大歓迎です！

    <h2 id="comments-title">Comments</h2>
 <div id="comment-list">
    <?php

}
$commenttimestamp = strtotime("now");

$sql = "SELECT * FROM php_blog_comments WHERE entry='$id' ORDER BY timestamp";
$result = mysql_query ($sql) or print ("Can't select comments from table php_blog_comments.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
    $timestamp = date("l F d Y", $row['timestamp']);
      printf("<div class='comment-ind'><p id='comments'><a id='username' href=\"%s\">%s</a> %s</p>", stripslashes($row['url']), stripslashes($row['name']), $timestamp);
    print("<p class='comments'>" . stripslashes($row['comment']) . "</p><div class='clr'><br></div></div>");

  }
?>

<form id="commentform" method="post" action="process.php">

<p><input type="hidden" name="entry" id="entry" value="<?php echo $id; ?>" />

<input type="hidden" name="timestamp" id="timestamp" value="<?php echo $commenttimestamp; ?>">

<input type="text" name="name" id="name" title="Name (required)" /><br />

<input type="text" name="email" id="email" title="Mail (will not be published) (required)" /><br />

<input type="text" name="url" id="url" title="Website" value="http://" /><br />

<br />
<textarea  title="Your Comment Goes Here" name="comment" id="comment"></textarea></p>

<p><input type="submit" name="submit_comment" id="submit_comment" value="Add Comment" /></p>

</form>
</div>

CSS：

    #comments-title {
    background-color: #282828;
    width: 567px;
    height: 30px;
    font-size: 25px;
    font-family: arial;
    color: #ffffff;
    padding: 5px;
    padding-top: 6px;
    padding-bottom: 4px;
}


#comment-list{
    border:1px solid #dadada;
    width: 565px;
    padding: 5px;
    font-family: Helvetica;
    font-size: 18px;
}

#comments {
    width: 480px;
    font-size: 12px;
    color: #444444;
}

.comments {
    width: 480px;
    height: 20px;
}
.comment-ind {
    background-color: #eeeeee;
    width: 548px;
    position: relative;
    min-height: 10px;
    margin: 5px;
    padding: 8px;
}

画像： 代替テキスト

4

2 に答える 2

1

あなたの問題はにありheight: 20px;ます。に変更するmin-height: 20px;と、少なくともその高さになりますが、コンテンツに関係なく、常に20pxの高さになります。

于 2010-08-11T20:31:02.643 に答える
0

このdivに適用されるCSS全体が表示されていますか。スクリーンショットを見ると、テキストの段落が左に浮いていて、含まれているdivが折り返されていないと思います。overflow:hidden高さを削除して、含まれている.commentsdivに追加してみてください。そうすれば、高さはコンテインのサイズに合わせて調整されます。

于 2010-08-11T20:34:47.400 に答える