如何对齐三个 div(左/中/右)以进入小屏幕左/右和它们下方的中心元素 [英] How to align three divs (left/center/right) for getting in small screen left/right and under them center element
问题描述
我有左-中-右三个 div,以防万一在移动设备中打开文档,
在一行中显示左右元素并在它们下方居中元素
我需要:
a) PC[左] [中间的长文本] [右]b) PC 小屏幕!impartant![左] [长文 [右]在中心]c) 移动设备(小于 736px )[左右][文字居中]
我已经找到了 (a) 和 (c) 情况的解决方案,但它不适用于中间情况 (b)
看:http://jsfiddle.net/66fCm/692/
.wrap {文本对齐:居中}.剩下 {向左飘浮;背景:灰色}.正确的 {浮动:对;背景:红色}.中央 {文本对齐:左;背景:绿色;边距:0 自动!重要;显示:内联块}
<div class="left">剩下<div class="right">正确的
<div class="center">中心 |远在远方,在山字背后,远在
NEW/CHANGED ANSWER:
如果您更改如下所示的顺序并使用媒体查询,您可以在大屏幕的 flexbox 和小屏幕上的组合浮动/非浮动场景之间交替,如下所示.
.wrap {显示:弹性;}.剩下 {背景:灰色}.正确的 {背景:红色;订单:2;}.中央 {背景:绿色;边距:0 自动!重要;}@media(最大宽度:500px){.裹 {显示:块;文本对齐:居中;}.剩下 {向左飘浮;}.正确的 {浮动:对;}.中央 {清楚:两者;显示:内联块;文本对齐:居中;}}
<div class="left">剩下<div class="right">正确的
<div class="center">中心 |桌子上摊开着一系列纺织品样品