html - 3 格，2 固定宽度和 1 流体

Question

我有一个问题，我将第一个 div（30px 宽度）浮动到左侧，将第三个 div（30px 宽度）浮动到右侧并且第二个 div 占用了整个窗口宽度的剩余空间

例子：

http://jsfiddle.net/AScBN/188/

.right
{
   height:40px;
   width:40px;
   float:left;
   background:green;
}

.left
{
   height:40px;
   width:40px;
   float:right;
   background:green;
}

.fluid
{
   margin-right: 50px;
   height:40px;
   background:red;
}

div
{
   border:1px solid yellow;
}

问题：

我不能让他们并排坐着，最后一个 div 显然因为第二个 div 流体而被推到下面

谢谢

艾登

Answer 1

你的订单错了

<div class="right">1</div>
<div class="left">3</div>
<div class="fluid">3</div>

非浮动 div 应该是最后一个。

Answer 2

Flex这是使用更新的jsFiddle执行此操作的另一种非常简单的方法

HTML

<div class="wrapper">
    <div class="fixed">1. Fixed Right</div>
    <div class="fluid">2. Fluid</div>
    <div class="fixed">3. Fixed Left</div>
</div>

CSS

.wrapper {
    height:40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.wrapper div {
    margin: auto;
    border:1px solid yellow;
    height: 40px;
    text-align: center;
}
.fixed {
    width:40px;
    background:green;
}
.fluid {
    flex: 1;
    background:red;
}

Answer 3

把你的“绿色”div 放在“红色”里面。将“红色”上的溢出设置为块。完毕。

例子

<div class="fluid">2
    <div class="left">3</div>
    <div class="right">1</div>
</div>

.right {
    height:40px;
    width:40px;
    float:left;
    background:green;
}
.left {
    height:40px;
    width:40px;
    float:right;
    background:green;
}
.fluid {
    overflow:block;
    height:40px;
    background:red;
    border:1px solid yellow;
}

Answer 4

适用margin: 0 auto;于您的.fluid