DIV浮动右浮动DIV左浮动

嗨我有一个导航div，其底部有一个div。这个div有两个其他divs“DIV 1”和“DIV 2”（见图片）。现在，我在平板设备上关闭了导航，因此我将显示包含浮点数的第二个div：位于包含float：left的第一个div上，如图中所示。我怎样才能做到这一点？现在第一个div已经结束了。谢谢。DIV浮动右浮动DIV左浮动

来源

2016-05-17 MrBuggy

您是否尝试过改变你的HTML代码中的DIV的顺序？ DIV2之前的DIV1。 –

@SlavenkoMiljic嗨。是。问题是，导航打开时，顺序应该是左侧的DIV 1和右侧的DIV 2。但是当它关闭时，DIV 2应该在DIV 1之上......如果我在代码中更改它，那么打开的导航中的顺序将不正确。 – MrBuggy

正如Slavenjo指出的那样，您所要做的就是颠倒div的顺序。 div 2仍然在右边，而div 1仍然会在左边，即使你有div 2 first和div 1 second。 – Pegues

您可以用Flexbox和媒体查询这样做只是改变第二个元素的order到order: -1，这里是Fiddle

.nav { 
 
    height: 200px; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    border: 1px solid black; 
 
} 
 
.one { 
 
    background: #5B9BD5; 
 
} 
 
.two { 
 
    background: #FF0000; 
 
} 
 
.div { 
 
    flex: 1; 
 
    padding: 10px 0; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
} 
 
@media(max-width: 480px) { 
 
    .nav { 
 
    flex-direction: column; 
 
    align-items: normal; 
 
    justify-content: flex-end; 
 
    } 
 
    .div { 
 
    flex: 0 0 50px; 
 
    } 
 
    .two { 
 
    order: -1; 
 
    } 
 
}

<div class="nav"> 
 
    <div class="div one">1</div> 
 
    <div class="div two">2</div> 
 
</div>

来源

2016-05-17 11:43:00

请注意使用flex的有限支持：http://caniuse.com/#feat=flexbox – Pegues

如果您在使用导航菜单“flex-direction：column-reverse”时使用它，它也可以工作。最好的祝福。 – MrBuggy

您可以使用media queries用于这一目的。

你可以在某些时候操纵你的div来改变他们的风格。

@media (max-width: 600px) { 
    #someElement { 
    float: left; 
    } 
}

来源

2016-05-17 11:40:17

你可以尝试以下方法，与媒体查询沿800像素去除浮动：

的jsfiddle：https://jsfiddle.net/7ws3m9Lx/

CSS：

.div1,.div2 { width: 50%; } 
.div1 { float: left; } 
.div2 { float: right; } 

@media screen and (min-width: 0) and (max-width: 800px){ 
    .div1,.div2 { float: none; width: 100%; } 
}

HTML：

<div class="parent"> 
    <div class="div2">DIV2</div> 
    <div class="div1">DIV1</div> 
</div>

来源

2016-05-17 11:42:21 Pegues

DIV浮动右浮动DIV左浮动

回答

相关问题