3 Divs，2固定宽度和1 Fluid

我有一个问题，我在第一个div（30像素宽度）向左，第三个div（30像素宽度）向右，第二个div占据从整个窗口剩余空间宽度3 Divs，2固定宽度和1 Fluid

实施例：

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

感谢

艾登

来源

2013-08-26 Aiden

你拿到了订单错

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

非-floating div应该是最后一个。

来源

2013-08-26 03:17:14 ragnika

嘿那里，这是工作，但为什么它关系到div的放置顺序？ – Aiden

在正常流程中，块元素堆叠下一个元素。因此，在您的原始代码中，div.fluid基本上告诉div.left转到右边浮动的下一行。这篇[文章]（http://alistapart.com/article/css-floats-101）可以更好地解释它。阅读“如何漂浮行为”。 – ragnika

应用margin: 0 auto;您.fluid

来源

2013-08-26 03:13:08

把你的“绿色”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; 
}

来源

2013-08-26 03:28:02 Thanos

这是另一个令人难以置信的简单的方法来做到这一点使用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; 
}

来源

2014-10-24 17:58:50

3 Divs，2固定宽度和1 Fluid

回答

相关问题