html - 如何在移动设备中垂直对齐 div 标签并在 CSS 中的大屏幕上水平对齐？

Question

我有三个 div 标签，1 个父标签和 2 个子标签。父 div 应占据页面的整个宽度和内容的高度(即 2 个子 div)。 2 个子 div 应水平放置在更大的屏幕(即笔记本电脑、台式机...)上并占据父级宽度的 50% 并根据内容展开。

2 个子 div 应在较小的设备(即移动设备)上垂直对齐/堆叠，占据父级的整个宽度并根据内容展开。

我曾尝试使用显示属性，包括 block 、内联 block 以及绝对位置和相对位置，但没有成功。

.parent {
  display: flex;
  padding: 20px;
}

.child1 {
  display: inline-block;
  width: 50%;
}

.child2 {
  display: inline-block;
  width: 50%;
}

Answer 1

flex 和 grid 可以让你放弃 mediaquerie 断点。

使用媒体查询，您可以切换回display:block;

对于信息:由于您在父级上使用了 flex，因此子级上的显示值不会有任何影响，但如果涉及边距、填充或边框，宽度:50% 可能会太多。 box-sizing 可以成为你的 friend 。有了 flex，你可以使用 flex:1; 均匀地喷洒 child ，无论数量、边框、填充或边距如何。

带有网格、flex 和通过 mediaquerie 切换回 block 的示例。演示中的断点设置在 620px 左右，更新值。用于满足您的需求。

/* the flex container without mediaquerie */

div[class] {
  display: flex;
  min-height: 20vh;
  flex-wrap: wrap;
  /* needed to stack children once to big */
}

div[class] div {
  flex: 1;
  min-width: 300px;
  /* 2 children + margin and borders makes a break point at around 620px */
  background: lightblue;
}

div div {
  border: solid;
  margin: 3px;
  background: tomato;
}

div[id] {
  min-height: 20vh;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* again a break point at about 620px when 2 children no need of mediaquerie */
}

div[id][class] div {
  background: lightgreen;
}


/* remove the grid system at about 620px */

@media screen and (max-width: 621px) {
  div[id],
  div[class] {
    min-height: 30vh;
    /* has a meaning with a grid system */
  }
  div[id][class] {
    display: block;
    /* looses the grid system, back to classic layout see min-height behavior not resizing  children */
    border: solid;
  }
}

<div class>
  <div>1</div>
  <div>2</div>
</div>
<div id>
  <div>1</div>
  <div>2</div>
</div>
<div id class>
  <div>1</div>
  <div>2</div>
</div>

一些有用的链接:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• https://css-tricks.com/snippets/css/complete-guide-grid/

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries