Question

所以我正在建立一个关于媒体查询的网站，但我有一个问题。

有两个旁边应该彼此左右移动，并且是页面的50％。问题是他们并没有左右移动，而是彼此重叠。

看起来像一个问题应该通过添加宽度来解决：50％;两个哦，旁边，但我似乎没有工作。我也试过左右浮动和很多事情，但我尝试过的东西似乎都没有用。

我还应该注意整个页面都在flexbox中，这可能是问题的一部分。

以下是媒体查询的代码，问题是：

@media (min-width: 30em) and (max-width: 37.5em){

    body section, footer, header{
        display: flex;
        flex-wrap: row wrap;
    }

    .aside1, .aside2{
        font-family: 'Damion', cursive;
        width:50%;
    }

}

这里也是html的标记。只有重要的事情（我认为）：

<section>
    <aside class="aside1"><h2>Aside 1</h2><p>Lorem ipsum.</p></aside>
    <aside class="aside2"><h2>Aside 2</h2><p>Lorem ipsum.</p></aside>
    <article>
       <h1>Article</h1>
       <p><b>Lorem ipsum.</b></p>
       <p>Lorem ipsum.</p>
    </article>
</section>

Answer 1

我找到了答案。有一小段代码不应该与具有“问题”的代码进行交互。

问题在于有一条线：

body section {flex-direction：column;}

这一行不在@media中，我认为它不会与该代码交互。所以我刚刚删除它并且它已修复。

感谢所有试图提供帮助的人。无法相信随机的人在网上有多好。

两个旁边不是并排而是彼此重叠

1 个答案: