如何对齐三个 div（左/中/右）以进入小屏幕左/右及其下方的中心元素答案

【问题标题】：How to align three divs (left/center/right) for getting in small screen left/right and under them center element如何对齐三个 div（左/中/右）以进入小屏幕左/右及其下方的中心元素
【发布时间】：2017-01-25 21:00:11
【问题描述】：

我有三个 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>

【问题讨论】：

我需要所有三种情况（a、b 和 c），每种情况都适用于不同的屏幕尺寸

标签： html css sass

【解决方案1】：

新/更改的答案：

如果您按如下所示更改顺序并使用媒体查询，您可以在大屏幕的 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>

【讨论】：

最佳答案，谢谢

【解决方案2】：

试试这个。将 100% 宽度设置为移动屏幕的中心元素。我附上了代码sn-p。

<!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>

【讨论】：

@arthur_3589897 所有的 A、B 和 C 案例都在那里。在大屏幕和中屏幕中，内容将按照您提到的适合，对于移动屏幕，中心 div 将具有 100% 的宽度。请通过将脚本复制粘贴到具有不同屏幕尺寸的 HTML 文件中进行测试。

【解决方案3】：

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

为 div 开始折叠时的尺寸添加媒体查询，例如：

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

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

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

【讨论】：

我试过你的例子 - 它对我有帮助，更新你的代码后我得到了我需要的东西jsfiddle.net/66fCm/694谢谢