我需要用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;
}
}
那么我该如何解决这个问题?
答案 0 :(得分:12)
这很简单: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;
}
<强>除了强>
我遗漏了包装纸。这与演示无关。但有一个问题:如果你给包装器宽度为100%,那么保证金是多少:0自动为什么?你真的需要指定宽度吗?
答案 1 :(得分:-1)
如果我理解的话,请尝试使用此代码:
.wrapper{
width:100%;
margin: 0 auto;
.left{
width:250px;
float:left;
}
.right{
float:right;
width:100%;
margin-right: 250px;
}
}
答案 2 :(得分:-1)
你可以删除.right上的float:right
,如:
right{
width:100%;
margin-left: 250px;
}
请注意,我没有使用SASS风格。
答案 3 :(得分:-1)
margin
float
而不是right div
.wrapper{
width:100%;
margin: 0 auto;
}
.left{
width:250px;
height:100%;
float:left;
background:#f00;
}
.right{
height:100%;
margin-left: 250px;
background:#0f0;
}
<强> DEMO 强>