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>

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

Answer 1

在HTML文件中，首先需要设置浮动元素，然后是非浮动元素。因为浮动元素将阻止网站的整个“级别”，浮动元素位于下方。

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

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

除此之外它看起来不错。

Answer 2

向左浮动，使它们相互叠加。

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

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

Answer 3

将float添加到.csscontent类，如

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

Answer 4

.content, .sidebar {
  float: left;
}

像上面那样向左移动两个div将同时显示内联。

然后，您可以将特定样式应用于每个类。然后将宽度分配给.content将确定.sidebar出现在哪里......

Answer 5

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

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

Answer 6

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

<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;
 }

Answer 7

查看代码和演示的小提琴

小提琴：http://jsfiddle.net/g42x2/1/

演示：http://jsfiddle.net/g42x2/1/embedded/result/

SS：

enter image description here

我需要在这里更改我的CSS

7 个答案: