html - 无法将我的侧边栏放在右侧

标签 html css css-float

我是 CSS 的业余爱好者,并且尝试使用一些指南来让自己走得更远。我已经设置了一个 fiddle http://jsfiddle.net/defaye/X9t7M/1/对于任何可能知道我做错了什么的人?我无法将右侧的侧边栏作为主要内容的最右侧列。

CSS 结构

#wrapper {
  width: 100%;
  min-width: 950px;
  max-width: 1110px;
  margin: 0 auto;
}

#header {
  float: left;
  height: 354px;
  width: 100%;
}

#navigation {
  float: left;
  height: 40px;
  width: 100%;
}

#container {
  float: left;
  width: 100%;
}

#main {
  margin-right: 200px;
}

#sidebar {
  width: 300px;
  margin-left: -300px;
  float: left;
}

#footer {
  height: 40px;
  width: 100%;
  clear: both;
}

HTML结构

<body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="navigation"></div>
    <div id="container">
      <div id="main"></div>
      <div id="sidebar"></div>
    </div>
    <div id="footer"></div>
  </div>
</body>

最佳答案

看看this fiddle怎么运行的。这是 your updated fiddle

#main, #sidebar {
    float: left;
}

#main {
    width: 70%;
}

#sidebar {
    width: 30%;
}

关于html - 无法将我的侧边栏放在右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24108179/

相关文章:

html - 当图像超出 TD 边界时裁剪图像

java - HTML.fromHTML - Android 中的 TagHandler

javascript - 如何在 jquery + jquery mobile 中创建自定义下拉菜单

css - HTML 分区/居中

html - 简单的 CSS : Making column backgrounds line up

CSS布局: image gallery with left-bar

javascript - 自定义 CSS 输入框导致页面按 ENTER 键刷新

javascript:循环遍历元素并更改它们的值

css - Cocoa WebKit - 检测 CSS 翻转/悬停

css - 重置 CSS box-sizing : universal selector vs . 框类