如何更改并排 div 以在移动设备上堆叠? [英] How to change side by side divs to stack on mobile?

问题描述

我试图让我的 2 个 div(并排)在移动设备上查看时更改为堆叠 div，如小提琴所示，但我希望两个在顶部，一个"在第二个.

这是代码 - http://jsfiddle.net/d3d4hb3t/

.one {边框:1px纯绿色；宽度:29%；向左飘浮;高度:100px；}.二 {边框:1px纯蓝色；宽度:69%；浮动:对；高度:100px；}@media(最大宽度:767px){.一 {宽度:100%；}.二 {宽度:100%；}}

one
<div class="two">two</div>

我知道简单的解决方案是交换 div 1 和 2，但由于我的代码很复杂，我希望有一个仅使用 CSS 的更简单的解决方案.

解决方案

更新

在下面添加了一个 flexbox 方法:

UPATED JSFIDDLE

.wrap {显示:弹性；}.一 {宽度:30%；边框:1px纯绿色；}.二 {宽度:70%；边框:1px纯蓝色；}@media(最大宽度:767px){.裹 {弹性方向:反列；}.一，.二 {宽度:自动；}}

<div class="one">1</div><div class="two">2</div>

原答案

如果你被标记卡住了，你仍然可以使用神奇的 css 表格布局来改变 2 个 div 的顺序.我全部更新了，只是为了保持一致性.

那些 display 值是如何工作的，来自 MDN:

<块引用>

display: table; - 行为类似于

元素.

display: table-cell; - 行为类似于

元素.

display: table-footer-group; - 行为类似于

元素.

更新的 JSFIDDLE

.wrap {显示:表；边框折叠:折叠；宽度:100%；}.一，.二 {显示:表格单元格；}.一 {宽度:30%；边框:1px纯绿色；}.二 {宽度:70%；边框:1px纯蓝色；}@media(最大宽度:767px){.一 {显示:表页脚组；宽度:100%；}.二 {显示:表头组；宽度:100%；}}

<div class="one">1</div><div class="two">2</div>

I am trying to get my 2 divs (which are side by side) to change to stacked divs when viewed on mobile as shown in the fiddle, but I would like "two to be on top and "one" to be second.

Here is the code - http://jsfiddle.net/d3d4hb3t/

.one {
  border: 1px solid green;
  width: 29%;
  float: left;
  height: 100px;
}

.two {
  border: 1px solid blue;
  width: 69%;
  float: right;
  height: 100px;
}

@media (max-width: 767px) {
  .one {
    width: 100%;
  }
  .two {
    width: 100%;
  }
}

<div class="one">one</div>
<div class="two">two</div>

I know the simple solution would be to swap divs one and two around, but since the code I have is complicated, I was hoping there was an easier solution using just CSS.

解决方案

Update

Added a flexbox approach below:

UPATED JSFIDDLE

.wrap {
  display: flex;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .wrap {
    flex-direction: column-reverse;
  }
  .one,
  .two {
    width: auto;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

Original answer

If you're stuck with the markup, you can still use the magic css table layout to change the order of the 2 divs. I updated it all, just to keep the consistency.

How those display values work, from MDN:

display: table; - behaves like <table> element.

display: table-cell; - behaves like <td> element.

display: table-header-group; - behaves like <thead> element.

display: table-footer-group; - behaves like <tfoot> element.

UPDATED JSFIDDLE

.wrap {
  display: table;
  border-collapse: collapse;
  width: 100%;
}

.one,
.two {
  display: table-cell;
}

.one {
  width: 30%;
  border: 1px solid green;
}

.two {
  width: 70%;
  border: 1px solid blue;
}

@media (max-width: 767px) {
  .one {
    display: table-footer-group;
    width: 100%;
  }
  .two {
    display: table-header-group;
    width: 100%;
  }
}

<div class="wrap">
  <div class="one">1</div>
  <div class="two">2</div>
</div>

这篇关于如何更改并排 div 以在移动设备上堆叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.

元素. display: table-header-group; - 行为类似于