表格延伸过去的容器

Question

我对PHP / HTML / CSS比较陌生，并尝试在某个人的个人资料上开发访问者消息系统。代码工作正常，进入数据库等。我遇到的问题是vmdisplay表（提取访问者消息的表）完全忽略了它所在的容器的限制，并且正在从页面中脱离。

访问者消息的显示位于另一个名为vminput的表下。这是代码：

    <form action="profile.php?id=<?php echo $id;?>" method="post" name="post_vm">
        <table class="vminput">
            <tr>
                <td><br> <textarea name="vm_message" class="vm" /></textarea></td>
            </tr>
            <tr>
                <td> <div align="right"> <input type="submit" value="Post visitor message" name="post_vm"></td></div>
            </tr>

        </table>

    </form>

这是vmdisplay的代码

         <table class="vmdisplay">
                <tr>
                    <td><h2><?php echo $sender; ?> - <?php echo $date; ?></small></td>
                    <td width=100px align="right"><a href=""> Delete message</a></td>
                </tr>
                <tr>
                    <td colspan="2" class="vm_disp"><?php echo $message; ?> </td>
                </tr>
            </table>

这里是两者的CSS：

.vminput{
   width:500px;
   float:right;
   height:200px;
   display:block; 
 }
.vmdisplay{
max-width:500px;
float:right;
clear:right;
}

这是一个正在发生的事情的例子。 http://i.imgur.com/b8HHiiz.png

非常感谢任何帮助。

Answer 1

以下是根据您的问题创建的demo。在这个PHP脚本被删除，因为我没有数据库连接。但代码结构保持不变只是用你的PHP替换文本消息。如果内容非常大，则会出现滚动条。

HERE是您的显示html页面：

    <table class="vmdisplay" border="2">
                            <tr>
                                <td><h2>Date</small></td>
                                <td><a href=""> Delete message</a></td>
                            </tr>
                            <tr>
                                <td colspan="2"><div class="msg">Hello this is a big message guessing your messsage to be too big . Here is again some more message.
                                    Hello this is a big message guessing your messsage to be too big . Here is again some more message.</div></td>
                            </tr>
                        </table>

CSS [在剩余的CSS之后添加此项]

            .vmdisplay{
            width:400px;
            float:right;
            height:200px;
            }
            .vmdisplay .msg{
                width:100%;
                height:60%;
                word-wrap:word-break;
                overflow-y:scroll;
            }

  

在上面的css中，你忘了定义vmdisplay类，而是定义了vminput两次。让我知道你是否需要任何进一步的帮助..干杯，一切都是好的。