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/

＆＃13;

.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
}

＆＃13;

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

＆＃13;

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

为了使max-width可折叠，您可以在其上使用@media screen and (min-width: 400px) and (max-width: 550px) { .center { display: block; max-width: 370px; } }并将其设置为显示块。

在div开始折叠时添加媒体查询，例如：

div.center

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

更改媒体查询所需的最小和最大宽度，无论您想要{{1}}多大。

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 个答案: