清除{

Question

我是CSS的新手并且正在编写此代码，主要内容和侧边栏不合适。谁知道为什么？

这是使用的HTML和CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title> WEB HELPDESK</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="styles/polaris.css" type="text/css" />
  </head>
  <body>
    <div id="container">
      <div id="header">
        <p class="banner"> WEB HELP DESK <p>
      </div>

      <div id="pathway">

      </div> <!-- pathway -->

      <div id="main">
        <div id="menu_bar">
          <div class="menu">
            <ul>
              <li> <a href=""> Manufacturers </a> </li>
              <li> <a href=""> Add Manufacturer </a> </li>
              <li> <a href=""> Edit manufacturer </a> </li>
              <li> <a href=""> Delete Manufacturer </a> </li>              
            </ul>
            <ul>
              <li> <a href=""> Asset types </a> </li>
              <li> <a href=""> Add Asset types </a> </li>
              <li> <a href=""> Edit Asset Types </a> </li>
              <li> <a href=""> Delete Asset Types </a> </li>
            </ul>
            <ul>
              <li> <a href=""> Asset Status </a> </li>
              <li> <a href=""> Add Asset Status </a> </li>
              <li> <a href=""> Edit Asset Status </a> </li>
              <li> <a href=""> Delete Asset Status </a> </li>              
            </ul>
            <ul>
              <li> <a href=""> Assets  </a> </li>
              <li> <a href=""> Add Asset  </a> </li>
              <li> <a href=""> Edit Asset  </a> </li>
              <li> <a href=""> Delete Asset  </a> </li>              
            </ul>
          </div>
        </div> <!-- Menu bar -->
        <div id="sidebar">
          sidebar
        </div> <!-- Menu bar -->

        <div id="main_content">
          <div id="errors">

          </div> <!-- Errors -->

          <div id="content">
            content goes here

          </div> <!-- Content -->
          am floating here
        </div>
      </div> <!-- Main -->

      <div id="footer">

      </div> <!-- Footer -->
    </div> <!-- Container-->

  </body> <!-- Body -->
</html>

CSS：

body {
  font-family: arial, san serif;
  color: #000000;
}

#container {
  margin: 0em 1.5em 1.5em 1.5em;
  border: 1px solid #46A5E0;
}

#header{
  margin: 0.1em 0em 0.1em 0.1em;
  border: 1px solid #46A5E0;
  width: 99%;
  height: 5em;

}

#header .banner {
  color: #333399;
  text-align: centre;
  font-size: 1.6em;
}

#pathway {

}

#main {
  margin: 0.1em 0.1em 0.1em 0.1em;
  border: 1px solid #000000;
}

#menu_bar {
  margin: 0.1em 0.1em 0.1em 0.1em;
  border: 1px solid #46A5E0;
  width: 13em;
}

#menu_bar .menu {
  font-size: 0.7em;
}

#sidebar {
  margin: 0.1em 0.1em 0.1em 0.1em;
  border: 1px solid #46A5E0;
  float: right;
  width: 13em;
}

#main_content {
  margin: 0.1em 0.1em 0.1em 0.1em;
  border: 1px solid #46A5E0;
  float: right;
}

#errors {

}

#content {

}

#footer {

}

Answer 1

检查Holy Grail article from A List Apart。本文展示了创建3列布局的最佳方法。

不要走简单的路径，只需使用表格进行布局！仅将table标记用于“真实表格”，其他所有标记都使用div，span，list等。

无桌面布局的好处主要在于它更易于访问：较旧的浏览器或移动浏览器将简单地忽略CSS并仅显示页面的HTML内容。 Div标签将被忽略，而表格会使你的布局混乱......这是真的，会有很多div！但是现在不再需要使用表格进行布局了！

另外，就个人而言，我不会从WYSIWYG工具开始。如果你想要干净的HTML，你必须自己编写。此外，通过一些练习，您可以手动编写HTML，而不是使用工具。我使用的所有专业人员都用纯文本写HTML ...

Answer 2

你的侧边栏向右浮动;主要内容不是。尝试移动标记中主要内容上方的侧边栏。或者，也可以尝试为主要内容指定一个浮点数。

Answer 3

使用浮动：左侧为左侧休息div标签，右侧为右侧div，我怀疑您只是错过了浮动部件。

Answer 4

不确定你到底想要什么，但我怀疑像......

替换以下css类定义：＃menu_bar，＃main_content，＃footer with

#footer {
 clear:both;
}

#main_content {
 margin: 0.1em 0.1em 0.1em 0.1em;
 border: 1px solid #46A5E0;
 float: left;
}

#menu_bar {
 margin: 0.1em 0.1em 0.1em 0.1em;
 border: 1px solid #46A5E0;
 width: 13em;
 float:left;
}

Answer 5

所要求的是最后一个div表示为

在CSS中具有以下属性

清除{

clear: both;

}

这将解决定位问题，它会将侧边栏和main_content置于正确的位置，从这里可以根据宽度和边距对侧边栏和main_content进行调整

CSS问题

5 个答案:

清除{