html - 我需要在这里更改我的 CSS 什么

Question

我以前有表格来显示内容，这里的人建议我删除表格并使用 CSS 浮动来获得更好的样式。

我对一切都很陌生。我的问题是我有内容和侧边栏。我希望它显示为

content           | Sidebar

但是现在以我当前的样式显示它就像

content
|
Sidebar

你能纠正我吗？

       <style type="text/css">

   .csscontent
    {

          margin-right: 500px;



    }

   .csssidebar
    {
        float: right;
        width: 500px;
        background: darkgreen;
       /*  height:500px; */



    }


</style>

如果我添加

  <div class="Content">
  all the content
 <div class="sidebar">
 <Image>
 </div>

如果我在内容中添加侧边栏，则图像将显示在内容下方，右边距为 500px。

如果我在内容之外添加侧边栏，则图像将显示在内容下方。

  <div class="Content">
  all the content
  </div>

   <div class="sidebar">
   <Image>
  </div>

我希望内容和侧边栏并排显示

score 2 · Accepted Answer

在 HTML 文件中，您首先需要设置浮动元素，然后是非浮动元素。因为浮动元素会挡住网站的整个“层级”，而浮动元素放在下方。

所以你的 html 应该是这样的：

   <div class="sidebar">
   <Image>
  </div>
  <div class="Content">
  all the content
  </div>

除此之外，它看起来不错。

score 1 · Accepted Answer

将浮动添加到 .csscontent 类，如

 .csscontent
    {
          margin-right: 500px;
          Float:left;
    }

score 1 · Accepted Answer

.content, .sidebar {
  float: left;
}

像上面一样向左浮动两个 div 将显示两个内联。

然后，您可以将特定样式应用于每个类。然后为 .content 分配宽度将确定 .sidebar 出现的位置...

score 1 · Accepted Answer

或者，如果您只想将侧边栏浮动到右侧，而不浮动内容，您应该将侧边栏放在 HTML 中的内容上方。

当然，你仍然需要更正类名......

score 1 · Accepted Answer

您可以为这两个元素添加一个包装器。

<div id="wrapper">

  <div id="content">
      all the content
  </div>

  <div id="sidebar">
      <img/>
  </div>

</div>

div#wrapper {
     position:relative;
     overflow:hidden;
     width:800px;
}

div#content {
     float:left;
     width:600px;
} 

 div#sidebar {
     float:right;
     width:200px;
 }

score 1 · Accepted Answer

将两者都向左浮动，使它们相互堆叠。

    .Content
    {
          margin-right: 500px; 
          float: left; 
    }

   .sidebar
    {
        float: left;
        width: 500px;
        background: darkgreen;
    }