html - Css 设置左固定和右流体布局

标签 html css sass

我需要用html和css做这样的布局: 左边宽度为 250px 是静态的 右边是流动的,对于屏幕的其他部分 (100%-250px)

我尝试这样做(我正在使用 sass):

  .wrapper{
    width:100%;
    margin: 0 auto;
    .left{
      width:250px;
      float:left;
    }
    .right{
      float:right;
      width:100%;
      margin-left: 250px;
    }
  }

那么我该如何解决这个问题呢?

最佳答案

这很简单:http://jsfiddle.net/joplomacedo/ExHzk/ 如果您看不到 fiddle ,这里是 html 和 css。

HTML:

<div class="fixed"></div>
<div class="fluid"></div>​

CSS:

.fixed {
    float: left;
    width: 250px;
}

.fluid {
    margin-left: 250px;
}

一边
我遗漏了 wrapper 。它与演示无关。但有一个问题:如果您为包装器指定 100% 的宽度,那么 margin: 0 auto 的用途是什么?你真的需要指定宽度吗?

关于html - Css 设置左固定和右流体布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13032122/

相关文章:

javascript - 从我的站点提交表单方法 POST 到另一个站点并获取远程结果

javascript - 如何使用 jQuery 将事件绑定(bind)到新创建的 SVG 元素?

java - Java中使用API​​ HtmlUnit登录并获取网页

javascript - 如何通过索引从元素的类列表中删除类名?

css - 删除 compass 中未使用的生成的 css 文件

CSS 选择器和 Bootstrap 轮播 : cannot get overflow visible

html - 带有可点击下拉列表的复选框

html - 右和左图像边框在移动设备上被切断 - 强制移动设备显示图像 + 边框?

html - 带导轨的 Bootstrap : Align a dropup with other element in a footer

javascript - 如何在图像源不在 CSS 样式内的图像上应用线性渐变