两条边不是并排，而是在彼此之上答案

【问题标题】：Two asides not going side by side but on top of each other两条边不是并排，而是在彼此之上
【发布时间】：2017-02-24 23:49:43
【问题描述】：

所以我正在制作一个关于媒体查询的网站，但我遇到了问题。

有两个侧边应该彼此并排移动，占页面的 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>

【问题讨论】：

我们需要查看您的标记。
和 "flex-wrap: row wrap;"是无效的。但可能与您的问题无关。
是的，换行只是一个测试。我认为应该只是行。或者什么都没有
您介意提供您的 HTML 吗？ aside 标签应该与该代码正常工作
那里，添加了html。我很抱歉花了这么长时间。我是新来的，正在研究编辑器工具

标签： css flexbox

【解决方案1】：

解决方案 1：使用浮动

@media (min-width: 30em) and (max-width: 37.5em){
  .aside1, .aside2{
    font-family: 'Damion', cursive;
    width:50%;
    float:left;
  }
  .clear { clear: both; }
}

<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 class="clear">
   <h1>Article</h1>
   <p><b>Lorem ipsum.</b></p>
   <p>Lorem ipsum.</p>
</article>
</section>

调整到指定大小后，CSS 将正常显示

您可以使用float 使容器彼此相邻。如果你这样做，你需要确保它下面有一个带有clear: both 的容器，否则你会遇到布局问题。

解决方案 2：使用显示

@media (min-width: 30em) and (max-width: 37.5em){
  .aside1, .aside2{
    font-family: 'Damion', cursive;
    width:49%;
    padding:0px;
    margin:0px;
    display:inline-block;
  }
}

<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>

注意大多数浏览器中默认的display 选项是display: block，这意味着它们不能并排设置，除非将该值更改为inline 或inline-block，或者通过使用float。 W3Schools Reference

【讨论】：

没有解决我的问题，我想。我不确定您希望我将 <div class="clear"></div> 放在 html 中的哪个位置。我只是把它放在aside2 的正下方，就像你在上面的html 中演示的那样。不知道这是否正确
我看到了编辑。将 clear 类添加到文章中似乎也不起作用
对不起，我对这个答案做了 10 次编辑。我还添加了第二个解决方案。当我将浏览器调整到指定大小时，这两种方法都对我有用。
好的，谢谢。但是我在问题中添加了一些我没有输入的代码，因为我认为这并不重要。可能，但我非常怀疑。
问题是我的朋友们制作的网站基本相同。他们所要做的就是在旁边添加width:50%;，这对他们有用。这在 CSS 代码的其他部分应该不是问题，因为这都在 @media 下

【解决方案2】：

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

问题是有一行：

正文部分 {flex-direction: column;}

这条线在@media 之外，我认为它不会与该代码交互。所以我只是删除了它并修复了它。

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

【讨论】：