Css设置了左固定和右流体布局 [英] Css set left fixed and right fluid layout

问题描述

我需要使用html和css这样的布局：
左边的宽度是静态的，对于250px
右边是流畅的，对于其他屏幕其余部分（100％-250px）

我尝试（我使用sass）：

  .wrapper {
宽度：100％; 
 margin：0 auto; 
 .left {
 width：250px; 
 float：left; 
} 
 .right {
 float：right; 
宽度：100％; 
 margin-left：250px; 
 
 
  

那我该如何解决这个问题？

解决方案

这很简单： http： //jsfiddle.net/joplomacedo/ExHzk/
如果你看不到小提琴，这里是html和css。

HTML：

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

CSS ：

  .fixed {
 float：left; 
 width：250px; 
} 
 
 .fluid {
 margin-left：250px; 
} 
  

另外

I把包装纸丢掉了。这与示范不相关。一个问题，但：如果你给包装100％的宽度，什么是保证金：0自动为？你真的需要指定宽度吗？

I need to do with html and css such layout: left width is static for 250px right is fluid, for other rest of screen (100%-250px)

I try so(i'm using sass):

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

So how can i solve this problem?

解决方案

This is pretty simple to do: http://jsfiddle.net/joplomacedo/ExHzk/ If you can't see the fiddle, here's the html and css.

HTML:

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

CSS:

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

.fluid {
    margin-left: 250px;
}

Aside
I left out the wrapper. It's not really relevant for the demonstration. One question though: If you're giving the wrapper a width of 100%, what's the margin: 0 auto for? And do you really need to specify the width?

这篇关于Css设置了左固定和右流体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！