HTML和CSS显示表错误_Html_Css - Fatal编程技术网

HTML和CSS显示表错误

html css

HTML和CSS显示表错误,html,css,Html,Css,我正在创建一个网站。左侧有一个菜单栏，旁边有主要内容。问题是，如果主要部分包含纯文本以外的内容，则其大小会影响左侧菜单栏的起点。以下是一个屏幕截图： “以用户身份登录”应该从顶部开始，但其起点取决于文本区域的大小（高度）。文本区域是可调整大小的，当我调整它的大小时，左菜单的内容“跟随”它你对如何解决这个问题有什么建议吗？提前感谢,， Tamas您的文本区域位于div#row内。把它分开就可以了。另一种解决方案是将div#left固定到顶部并设置其高度您将div#left和div#mai

我正在创建一个网站。左侧有一个菜单栏，旁边有主要内容。问题是，如果主要部分包含纯文本以外的内容，则其大小会影响左侧菜单栏的起点。以下是一个屏幕截图： “以用户身份登录”应该从顶部开始，但其起点取决于文本区域的大小（高度）。文本区域是可调整大小的，当我调整它的大小时，左菜单的内容“跟随”它

你对如何解决这个问题有什么建议吗？提前感谢,，

Tamas

您的文本区域位于

div#row

内。把它分开就可以了。另一种解决方案是将

div#left

固定到顶部并设置其高度

您将

div#left

和

div#main

设置为

表格单元格

，因此它们在调整大小时必须具有相同的高度。作为解决方案，您可以在

div#left

中添加额外的层并为其设置位置，或者您可以尝试跨越垂直单元格，但不认为这是对层的工作。也许

div#left

的

vertical align

设置很好

“您的文本区域位于left div#行内。将其分开就可以了。”您能更具体一点吗？因为我认为文本区域在div#main中。您得到了类似于

#wrapper

#row

#left

#main

的结构。因此，您需要将

#left

与

#main

隔离开来。当您缩放textarea

#row

时，也会缩放，同级

div

的对齐也会中断，因为

表单元格

显示-单元格不能有不同的高度1）我做了以下更改：#行只包含#main。现在我有两行，第一行包含#left，第二行包含#main 2）当我完全删除#行时，会出现与原始帖子中相同的结果（使用firefox 18.0.1）为什么使用表表示法？制作块，然后设置

float

和

clear

属性不是更简单吗？好吧，我首先使用了float这个东西，但是当改为html5时我遇到了一些问题，在谷歌搜索之后，我发现应该使用display:table“应该”。

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="sitestyle.css" /><title>
         cim1
      </title>
   </head>
   <body>
      <div id="header">
         cim2
      </div>
      <div id="wrapper">
         <div id="row">
            <div id="left">
               <span>
                  Logged in as user1<br/>
               </span>
               <a href="login.php?logout=1">
                  (logut)<hr/>
               </a>
               <a href="index.php?year=2013&month=1">
                  2013 - 1<br/>
               </a>
               <a href="index.php?year=2012&month=12">
                  2012 - 12<br/>
               </a>
            </div>
            <div id="main">
               <span>
                  <form action="/site/blog.php" method="post">
                     <textarea name="the_text" class="blog">
                     </textarea>
                     <input value="Submit" type="submit" /></form>
               </span>
            </div>
         </div>
      </div>
   </body>
</html>

html
{
   height: 100%;
}

body
{
   background-color: #aabbaa;
   margin: 0px;
   height: 100%;
}

div#header
{
   margin-left: auto;
   margin-right: auto;
   width: 80%;
   background-color: gray;
   background-color: #889988;
}

div#wrapper
{ 
   display: table;
   table-layout: fixed;
   width: 80%;
   height: 90%;
   margin-left: auto;
   margin-right: auto;
}

div#row
{ 
   display: table-row;
}


div#left
{ 
   display: table-cell;  
   width: 20%;
   background-color: #ccddcc;
   /*list-style: none;*/
}

div#main
{
   display: table-cell;  
   background-color: white;
}

textarea.blog
{
   resize: both;
   overflow: auto;
}