我有三个 div 标签，1 个父级和 2 个子级。父 div 应该占据页面的全宽和内容的高度（即 2 个子 div）。 2 个子 div 应水平放置在更大的屏幕（即笔记本电脑、台式机...）上，并占据父级宽度的 50% 并根据内容展开。
这 2 个子 div 应在较小的设备（即移动设备）上垂直对齐/堆叠，占据父级的整个宽度并根据内容展开。
我尝试过使用显示属性，包括块、内联块和绝对位置和相对位置，但没有运气。
.parent {
display: flex;
padding: 20px;
}
.child1 {
display: inline-block;
width: 50%;
}
.child2 {
display: inline-block;
width: 50%;
}
【问题讨论】：
尝试使用 css 网格样式来执行此操作。这是一个示例代码，其中 child1 和 child2 在大屏幕中位于同一行，但当屏幕变小（移动视图）时，它将位于另一个下方。希望对你有帮助
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
padding: 20px;
}<div class="parent">
<div>
child1
</div>
<div>
child2
</div>
</div>【讨论】：
此时使用media query 将两个子div 分解为占据50% 的宽度：
媒体查询在您想要根据设备的一般类型（例如打印与屏幕）或特定特征和参数（例如屏幕分辨率或浏览器视口）修改网站或应用程序时非常有用宽度）。
@media screen and (min-width: 600px) {
// Add your styling here.
}
请参阅下面的代码示例。
@media screen and (min-width: 600px) {
.parent {
display: flex;
}
.child {
width: 50%;
}
}
// Color styling
.parent {
background-color: #ccc;
}
.child {
background-color: lightblue;
}
.child:last-child {
background-color: lightgreen;
}<div class="parent">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime reprehenderit modi corporis veritatis iste sit, numquam hic velit dolorem recusandae commodi blanditiis animi quisquam temporibus illum id, repellat saepe adipisci eos odit obcaecati atque?
Nihil expedita ab doloribus cum, iusto suscipit autem quos tempore officiis nesciunt maiores. Quos, labore eum perferendis cupiditate veritatis excepturi, tenetur quasi perspiciatis eius suscipit distinctio inventore adipisci asperiores incidunt numquam
fugiat autem minus quae. Possimus fugiat eos consequuntur iusto et nisi earum obcaecati qui accusantium tenetur totam animi debitis minima accusamus cum quas, amet architecto quam sequi quisquam eum dolorum exercitationem rerum adipisci, esse! Voluptates.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, enim reprehenderit asperiores sapiente blanditiis odit. Possimus vel porro in eligendi vitae officiis placeat odit asperiores illo consequatur, quos enim nam quam natus pariatur,
sed autem excepturi temporibus, consequuntur beatae eos. Exercitationem voluptatum, aliquam harum delectus provident laudantium perferendis atque aliquid!</div>
</div>【讨论】：
`
.parent {
display: flex;
flex-flow: row wrap;
padding: 20px;
background: #ccc;
box-sizing: border-box;
}
.child {
max-width: 98%;
flex: 0 0 98%;
height: 200px;
background: #333;
margin: 0 1% 10px;
}
@media (min-width: 480px) {
.child {
max-width: 48%;
flex: 0 0 48%;
margin-bottom: 0;
}
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>`
【讨论】：
flex 和grid 可以让你放弃媒体查询断点。
使用媒体查询，您可以切换回display:block;
对于信息：由于您在父级上使用 flex，因此在子级上的显示值不会有任何影响，但如果涉及边距、填充或边框，则 width:50% 可能会太大。 box-sizing 在这里可以成为你的朋友。使用 flex，你可以使用flex:1; 均匀地喷洒孩子，无论数量、边框、填充或边距。
带有网格、弹性和通过媒体查询切换回阻止的示例。演示中的断点设置在 620 像素左右，更新值。用于满足您的需求。
/* 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>一些有用的链接：
【讨论】：