Question

我正在努力，要做到以下几点：

（第一句）：通过仅使用html和css，有一个父div，其中第二个子节点将占据浏览器最左侧区域的200px，而第一个子节点将占用浏览器的剩余宽度。

（第1个问题）：这可能吗？

我对这个html儿童订单感兴趣，因为我正在努力实现这个目标：

（第二句）：当浏览器进入纵向模式时，应该更改布局（通过媒体查询），最左边的子节点（以及具有固定宽度的子节点）低于最右边的子节点（即占用浏览器的剩余宽度）。

（第二个问题）：如果（第一句）不可能，这是完成（第二句）的最简单方法 ？

Answer 1

CSS

.2ndChild{
width: 200px;
float: left;
}

第一个孩子会自动漂浮到第一个孩子并占用剩下的空间。

Answer 2

（第1个问题）不是纯粹的CSS。如果你想让第一个孩子有一个固定的宽度（在第一个孩子上使用float和width然后在第二个元素上隐藏：隐藏在第二个元素上，那么它会起作用。但是设置第二个孩子的宽度永远不会对元素产生任何影响，在dom树之前或之上出现。抱歉......

（第二个问题）我真的不明白你的问题是什么，因为这是标准情况（第一个下面的第二个元素......）但我认为你的问题是媒体查询检查它是否是纵向模式？

您可以使用@media all and (orientation:portrait) { … }