纯CSS解决方案来推动的3项中间向下

我已经连续3个div的使用Flexbox的： 1 | 2 | 3

DIV 1的宽度是固定的。 Div 2'flexes'取1和3之间的可用空间，但最小应为其内容大小（其变化）。 div 3需要是它所包含的内容的宽度，因此会有所不同。

所以我必须：

1 (fixed with) | 2 (flexes, but minimal width should be the width of the content) | 3 (width of content)

我想实现的是，如果在所有三个div的坐容器变得太小太满足每个格，然后将中间部分的最小宽度要求（DIV 2）被推下。所以，我得到：

1 | 3 
----- 
    2

我知道我可以如何使用JavaScript实现这一点，但使用纯CSS的解决方案，因为他们知道我不知道的2和3事先内容的宽度是这可能吗？

这里有一个codepen这还没有做我想做的，但可以作为一个起点，为您节省时间：http://codepen.io/anon/pen/grBwEp

注：我知道我怎样才能既1 | 2 | 3或

1 | 3 
----- 
    2

通过更改order属性。但是，由于我不知道内容的宽度以及内容的变化，我无法为交换机提供固定断点...

来源

2016-04-28 Seba Kerckhof

可以改变div的顺序，如1，3，然后2，这样可以很容易地使用css –

@A tifAzad不，因为他们也会是'1 | 3 | 2“，如果他们在一排。而且我不能根据断点来更改顺序，因为我不知道宽度。 –

检查下面的答案 –

您可以强制第二个孩子（child2）处于新的状态行，如果你添加width: 100%和秩序上次（order: 3），它看起来是这样的：

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container > div { 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 

 
.container > div.child1 { 
 
    width: 150px; 
 
    background-color: red; 
 
    order: 1; 
 
} 
 

 
.container > div.child2 { 
 
    background-color: blue; 
 
    order: 3; 
 
    width:100%; 
 
} 
 

 
.container > div.child3 { 
 
    background-color: green; 
 
    order: 2; 
 
}

<div class="container"> 
 
    <div class="child1">1 (fixed width)</div> 
 
    <div class="child2">2 (flexes, but minimal width should be the width of the content)</div> 
 
    <div class="child3">3 (width of content)</div> 
 
</div>

来源

2016-04-28 07:57:33 Aziz

是的，但这是一个固定的解决方案。现在，它不会在两种情况之间切换。而且我不能使用媒体查询，因为我不知道内容的宽度。 –

你可以只添加一个媒体查询要与反应的大小。这里600px的宽度的例子：

@media (max-width: 600px) { 
    .container > div.child1, 
    .container > div.child3 { 
    flex: 1 0 auto; 
    width: auto; 
    } 
    .container > div.child2 { 
    flex-basis: 100%; 
    order: 4; 
    } 
}

这里您Codepen的分支版本：http://codepen.io/anon/pen/LNgRKa/left

来源

2016-04-28 08:00:46 kaiserkiwi

我不能使用断点，因为我不知道我必须打破的宽度，因为内容是可变的。 –

那么这里是解决

<style> 
.one, .two { 
    width: 33.3%; 
    float: left 
} 
.three { 
    width: 33.3%; 
    float: right 
} 
.one { 
    background: #999; 
} 
.two { 
    background: #060; 
} 
.three { 
    background: #336; 
} 
@media (max-width: 768px) { 
.two { 
    width: 100%; 
    float: none; 
    clear: both; 
} 
} 
</style>

和HTML

<div class="one">01</div> 
<div class="three">03</div> 
<div class="two">02</div>

来源

2016-04-28 09:18:24

你可以使用div来玩我只是使用百分比的随机宽度 –

OP希望第一个div的固定宽度为150px，也没有媒体查询。 – Aziz

使用此CSS希望它可以帮助你-----> .one，.two {float：left} .three {float：right} .one {background：＃999; width：150px;} .two {background：＃060;} .three {background：＃336;} –

纯CSS解决方案来推动的3项中间向下

回答

相关问题