Question

说我有三个div - Red Green和Blue，带有以下基本标记和样式：https://jsfiddle.net/ar8sn1o6/

<div id="main-input" contenteditable="true">Hello world!</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

但我希望在桌面上显示两列，在移动设备上显示一列，如this。 虽然合理地直接有红色 - ＆gt;蓝色 - ＆gt;绿色移动布局，我需要改为红色 - ＆gt;绿色 - ＆gt;蓝色布局

这是否可以不重复任何HTML？

Answer 1

可以使用media queries

查看此文章以了解更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

<强>语法

媒体查询由可选的媒体类型组成，并且可以作为   CSS3规范，包含零个或多个表达式，表示为   媒体功能，可以解析为真或假。的结果   如果媒体查询中指定的媒体类型，则查询为true   匹配文档显示的设备类型和所有   媒体查询中的表达式为真。

请参阅下面的代码段。调整大小以使其正常工作！

＆＃13;

.red, .green, .blue {
  display: inline-block;
  float: left;
  margin: 1%;
  width: 48%;
}

.red {
  background: red;
  height: 50px;
}

.green {
  background: green;
  height: 100px;
}

.blue {
  background: blue;
  height: 50px;
}

@media (max-width: 400px) {
  .red, .green, .blue {
    display: block;
    width: 100%;
  }
}

＆＃13;

<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>

＆＃13;

更新

仅使用CSS无法实现您想要实现的目标。我试着解释为什么不。

使用float: left或display: inline-block设置元素样式时。它们的父元素具有最高height的{{1}}。因此，插入新行的每个新块都将在最高的前一个孩子的底部对齐。

因此无法根据需要对齐它们。但是，您可以在其周围包裹child。然后只需添加div或float: left;。请参阅此示例： https://jsfiddle.net/ar8sn1o6/2/

注意：

使用float时，父元素将丢失其display: inline-block。您可以通过将height添加到父元素来解决此问题。

或使用clearfix。请参阅：https://css-tricks.com/snippets/css/clear-fix/

Answer 2

当设备的视口小于某个/指定的大小时，您可以使用媒体查询指定某些CSS。

例如：

@media screen and (max-width: 480px) {
    container {
        width: 100%;
    }

.blue {
background-color: blue;
width: 90%;
height: 50px;
}

}

这意味着如果设备的宽度小于480px，这些样式将生效。我想如果你把它们都放在一个容器中并且它们都有90％的宽度，它们会在移动视图中逐个对齐。

希望有所帮助

Answer 3

放置容器并添加媒体查询

＆＃13;

.red, .green, .blue {
  display: inline-block;
  margin: 1%;

}

.red {
  background: red;
  height: 50px;
  width:100%;
}

.green {
  background: green;
  height: 100px;

}

.blue {
   background: blue;
  height: 50px;
    width:100%;
}

.container, .green{
  float:left;
    width: 48%;
  }
  
  @media only screen 
  and (max-width: 480px)  {
    
    .container, .green{
    width: 100%;
  }
}

＆＃13;

<div class="container">
  <div class="red">Red</div>
  <div class="blue">Blue</div>
</div>

<div class="green">Green</div>

＆＃13;

CSS - 使列中的多个div回绕

3 个答案:

更新