Css 文本溢出 div

Question

我真的不知道该怎么办

我做了一个非常简单的留言簿，还可以，但是在显示评论时

文本从div中溢出

我正在尝试使用 pre 但没有成功

这是CSS

.guestbook_content {
    width: 100%;
    height: 100%;
    background: #FFE4E1;
    padding: 5px;
    font-size: 12px;
    margin-bottom: 10px;
}

#box {
    width: 628px;
    height: 438px;
    background: #fefefd ;
    overflow-y: scroll;
    overflow-x: hidden;

}

html 和 php

<div id='box'>
                        <div id='box_title'></div>
                        <div id="box_text">
                            <?php 
                            if(isset($_POST['mehet'])) {
                                $message= '';
                                $the_name= mysql_real_escape_string(strip_tags($_POST['nev']));
                                $comment = mysql_real_escape_string(strip_tags($_POST['comment']));
                                $date = date('Y.m.d H:i:s');

                                if(!empty($comment) && !empty($the_name)) {
                                //mysql_query("INSERT INTO vendeg (name, comment, date) VALUES ('$the_name', $comment', '$date')") or die(mysql_error());
                                mysql_query(" INSERT INTO guesstb(the_name, comment, date) VALUES ('$the_name', '$comment', '$date') ");
                                }else {
                                    $message= '<b><font color="darkred">Pleasse fill out all inputs</b></font>';
                                }   
                            }
                            ?>
                            <?php echo $message; ?>
                            <form action='<?php echo the_permalink();?>' method='POST'>


                            <label for='nev' class='gbl'>Name:</label>
                            <input type='text' name='the_name' id='the_name' class='gbi'>

                            <label for='comm' class='gbl'>Comment:</label>
                            <textarea name='comment' id='comm' rows='5' cols='60' class='gbt'></textarea>
                            <input type='submit' class='submit' value='Beküld' name='mehet'>
                            </form> 
                            <?php 
                            $result = mysql_query("SELECT * FROM guesstbORDER BY date DESC");
                            while($row = mysql_fetch_array($result))
                            {

                            ?><div class='guestbook_head'><span>sent by:</span> <b><?php echo $row['nev']; ?></b> <span> - date:</span> <?php echo $row['date']; ?> </div><?

                                ?>

                                    <div class='guestbook_content'><?echo $row['comment'];?></div>

                                <?

                            }

                    ?>  

有人可以给我提示吗

Answer 1

.guestbook_content {
    width: 100%; <-- drop this rule
    height: 100%;
    padding: 5px;
}

#box {
    width: 628px;
}

您给子 div 宽度:100% + padding 5px，这使得父 div 的 100% 为:628px + 5px 左填充 + 5px 右填充，因此子 div 为 638px 宽。只需将 100% 的宽度放在 child 身上。您所需要的只是填充。

这是与您的情况相关的 jsfiddle:http://jsfiddle.net/crg2U/2/ 这是 child 的 100% 宽度下降:http://jsfiddle.net/crg2U/3/