如何解决CSS固定流体柱没有额外的标记?
| 我正在寻找一种创建CSS布局的方法,其中左列是流畅的,而右列则使用下面的确切标记进行固定。我认为不可能。我错了吗?<div class=\"wrapper\">
<div class=\"left\">Fluid Column</div>
<div class=\"right\">Fixed Column</div>
</div>
解决方法
是的尝试这个:
<div id=\"wrapper\">
<div id=\"left\">
<div id=\"content\">
...
</div>
</div>
<div id=\"right\">
...
</div>
</div>
CSS:
#wrapper { width: 900px; }
#left { float: left; width: 100%; margin: 0 -100px 0 0 ; }
#content { margin: 0 100px 0 0; }
#right { float: right; width: 100px; }
注意:如果要使宽度为100%,请删除wrapper
。
, 目前,这可能不是一个可行的解决方案,但是如果您不反对使用最新的CSS,那么也可以使用CSS3 flex box模块。使用供应商特定的前缀,Firefox和基于Webkit的浏览器(例如Safari和Google Chrome)当前都支持该前缀。
<!doctype html>
<style>
.wrapper {
display: -moz-box;
display: -webkit-box;
display: flexbox;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
flex-direction: lr; /* box-orient has been renamed in the most recent version of the draft */
width: 100%;
}
.right {
width:150px;
background-color: #eee;
}
.left {
-moz-box-flex: 1;
-webkit-box-flex: 1;
flex-box: 1; /* box-flex has been renamed flex-box */
}
</style>
<div class=\"wrapper\">
<div class=\"left\">Fluid Column</div>
<div class=\"right\">Fixed Column</div>
</div>
为了语义,您可能需要将.left和.right重命名为.content和.sidebar之类的名称
, 试一下:
* { padding:0px; margin:0px; }
.wrapper {
position:absolute;
width:100%;
height:100%;
}
.left {
position:absolute;
top:0; bottom:0;
left:0; right:150px;
background-color:#999999;
}
.right {
position:absolute;
top:0; bottom:0;
right:0;
width:150px;
background-color:#AAAAAA;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。