Question

我有以下HTML布局，其中id = chart的div位于id = infobox的div下面：

<div id="infobox"></div>
<div id="chart"></div>

在移动版本中，我想重新安排它们，反之亦然，即信息框将在图表下：

<div id="chart"></div>
<div id="infobox"></div>

我能想到的唯一解决方案是在不同的容器中创建两个布局：

<div id="desktopContainer">
    <div id="infobox"></div>
    <div id="chart"></div>
</div>
<div id="mobileContainer">
    <div id="chart"></div>
    <div id="infobox"></div>
</div>

在CSS文件中，应用以下规则：

@media ( max-width :768px) {
    #desktopContainer {
        display: none
    }
}

@media ( min-width :768px) {
    #mobileContainer {
        display: none
    }
}

但是，这些div实际上是非常填充的元素，这会产生非常脏的代码。有没有办法通过指定ID或更清洁的解决方案将div放在另一个div下？

注意：它也应该在IE9中工作。

Answer 1

只有一个{{#getPeriodYears 'text' 'some Other Text'}} <div>{{year}}</div> <div>{{value}}</div> {{/getPeriodYears}}同时包含#container。您实际上可以使用<div>s并以这种方式使用FlexBox属性：

order

<强> order property:

CSS #container { display: flex; } @media ( max-width :768px) { #container div:first-child { order: 2; } } @media ( min-width :768px) { #container div:first-child { order: 1; } }属性指定用于在其Flex容器中布置弹性项目的顺序。元素按订单值的升序排列。具有相同订单值的元素按它们在源代码中出现的顺序排列。

以上代码非常通用，因为它使用order和#container，因此您可以根据自己的需要自行驯服。如果您需要进一步的帮助，请告诉我。

更多信息：CSS Tricks的A Complete Guide to Flexbox。

按ID在特定div下放置一个div

1 个答案: