Question

这种流体固定布局缺少什么？

HTML：

<div class="header">
    <div class="title">Title</div>
    <div class="options">Opt</div>
</div>

CSS：

.header{margin:0;padding:0;}
.title{margin-right:50px;}
.options{float:right;width:50px;position:relative;top:0;left:auto;}

DEMO：http://jsfiddle.net/7Sdq6/

以下链接有效，但我无法弄清楚上述示例缺少什么。

http://jsfiddle.net/andresilich/6vPqA/13/show/

编辑：我可以绝对定位.options但我有一个下拉列表，我不希望下拉列表的位置相对于.options

Answer 1

Demo

只需添加

display:inline-block;

而不是margin-right: 50px使用width: calc(100% - 50px)

<强> Demo

CSS

.header {
    width:400px;
}
.title {
    width: calc(100% - 50px); /* takes the width of the parent and we substract the width of the right floated div from it instead of using margin-right */
    background: red;
    display: inline-block;
}
.options {
    float:right;
    width:50px;
    background: blue;
}

Answer 2

据我所知，您需要使用流体选项来实现固定标题，因此您需要使用此CSS

<强> CSS

.title {
    margin:0 50px 0 0;
    float:left;
    width: 400px /*your width*/
}
.options {overflow:hidden}

Answer 3

我想出来了..

固定内容需要在HTML中的流畅内容之前：

<div class="header">
    <div class="options">Opt</div>
    <div class="title">Title</div>
</div>

http://jsfiddle.net/7Sdq6/5/

流体固定内容

3 个答案: