如何对齐三个div（左/中/右）以进入小屏幕的左/右和在它们下方的中心元素

Question

我的左，中，右分别有三个div，以防万一文档在移动设备中打开，

在一行中显示左元素和右元素，并在其下方显示中心元素

我需要：

a) PC 

      [left] [ long text in center ] [right]

b) PC smaller screen !impartant!

      [left] [ long text     [right]
               in center ] 

c) Mobile (smaller then 736px )

      [left]  [right]
      [ text in center ]

我已经找到了（a）和（c）案例的解决方案，但不适用于中间案例（b）

外观： http ： //jsfiddle.net/66fCm/692/

 .wrap { text-align: center } .left { float: left; background: grey } .right { float: right; background: red } .center { text-align: left; background: green; margin: 0 auto !important; display: inline-block }

 <div class="wrap"> <div class="left"> left </div> <div class="right"> right </div> <div class="center"> center | Far far away, behind the word mountains, far from </div> </div>

Answer 1

尝试这个。 将100％宽度设置为移动屏幕的中心元素。 我已经附上了代码片段。

 <!DOCTYPE html> <html> <head> <style> .wrap { text-align: center } .left { float: left; background: grey } .right { float: right; background: red } .center { text-align: left; background: green; margin: 0 auto !important; display: inline-block } @media only screen and (max-width: 736px) { .wrap { text-align: center } .left { float: left; background: grey } .right { float: right; background: red } .center { text-align: left; width: 100%; background: green; margin: 0 auto !important; display: inline-block } } </style> </head> <body> <div class="wrap"> <div class="left"> left </div> <div class="right"> right </div> <div class="center"> center | A collection of textile samples lay spread out on the table </div> </div> </body> </html>

Answer 2

为了使div.center可折叠，您可以在其上使用max-width并将其设置为display block。

当div开始崩溃时，添加媒体查询大小，例如：

@media screen and (min-width: 400px) and (max-width: 550px) {
  .center {
    display: block;
    max-width: 370px;
  }
}

http://jsfiddle.net/66fCm/693/

更改媒体查询中所需的最小和最大宽度，无论您希望div.center 。

Answer 3

新增/更改的答案：

如果您更改如下所示的顺序并使用媒体查询，则可以在大屏幕的flexbox和小屏幕的组合浮动/非浮动方案之间进行切换，如下所示。

http://jsfiddle.net/fj6op9jb/

 .wrap { display: flex; } .left { background: grey } .right { background: red; order: 2; } .center { background: green; margin: 0 auto !important; } @media (max-width: 500px) { .wrap { display: block; text-align: center; } .left { float: left; } .right { float: right; } .center { clear: both; display: inline-block; text-align: center; } }

 <div class="wrap"> <div class="left"> left </div> <div class="right"> right </div> <div class="center"> center | A collection of textile samples lay spread out on the table </div> </div>

如何对齐三个div（左/中/右）以进入小屏幕的左/右和在它们下方的中心元素

问题描述

3 个解决方案

解决方案1
1 2017-01-25 12:28:15

解决方案2
1 2017-01-25 12:40:33

解决方案3
1 已采纳 2017-01-25 12:43:20

如何对齐三个div（左/中/右）以进入小屏幕的左/右和在它们下方的中心元素

问题描述

3 个解决方案

解决方案1 1 2017-01-25 12:28:15

解决方案2 1 2017-01-25 12:40:33

解决方案3 1 已采纳 2017-01-25 12:43:20

解决方案1
1 2017-01-25 12:28:15

解决方案2
1 2017-01-25 12:40:33

解决方案3
1 已采纳 2017-01-25 12:43:20