Question

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

示例：

.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 - updated 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

将margin: 0 auto;应用于.fluid

Answer 4

将“绿色”div放在“红色”div中。将“红色”溢出设置为块。完成。

<强> EXAMPLE

<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;
}

3个Div，2个固定宽度和1个流体

4 个答案: