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

右和它们下方的中心元素

关注

发信

关注(28)粉丝(399)

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

本文介绍了如何对齐三个 div(左/中/右)以进入小屏幕左/右和它们下方的中心元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有左-中-右三个 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 和小屏幕上的组合浮动/非浮动场景之间交替，如下所示.

http://jsfiddle.net/fj6op9jb/

.wrap {显示:弹性；}.剩下 {背景:灰色}.正确的 {背景:红色；订单:2；}.中央 {背景:绿色；边距:0 自动！重要；}@media(最大宽度:500px){.裹 {显示:块；文本对齐:居中；}.剩下 {向左飘浮;}.正确的 {浮动:对；}.中央 {清楚:两者；显示:内联块；文本对齐:居中；}}


<div class="left">剩下
<div class="right">正确的

<div class="center">中心 |桌子上摊开着一系列纺织品样品

I have three divs left - center - right, I need in case if document is opened in mobile,

to show left and right elements in one line and under them center element

I need:

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 ]

I have found solution for (a) and (c) cases but it is not working for middle case (b)

look: 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>

解决方案

NEW/CHANGED ANSWER:

If you change the order as shown below and use media queries, you can alternate between flexbox for large screens and a combined float/non-float scenario on smaller screens as shown below.

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(左/中/右)以进入小屏幕左/右和它们下方的中心元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 00:26