css - float 左包装父而不是嵌套的 div

Question

尝试从头开始构建响应式布局，经过数小时的 Bootstrap 未能恰到好处。我的目标是在调整显示大小时让固定宽度的图 block 相互包裹，但如果侧边栏右侧的 div 中仍有足够的宽度来显示它们，则不包裹在侧边栏 div 下。

在下面的简单示例中，我希望图 block 相互包裹并在“过滤器和搜索”div 下，但不会在最左侧的“内容”div 下包裹，直到显示的宽度非常窄。随着宽度开始减小，侧边栏 div 右侧的所有内容都显示在其下方，即使右侧有足够的空间开始堆叠。有什么建议吗？

Here is the code (no stylesheets to show everything here:)

<div style="border:1px solid red;width:200px;float:left;" id="sidebar">
    <div>content1</div>
    <div>content2</div>
    <div>content3</div>
    <div>content4</div>
    <div>content5</div>
    <div>content6</div>
</div>
<div style="border:1px yellow solid;float:left;" id="contentarea">
    <div style="border:1px solid;float:left;">filters and search</div>
          <div style="border:1px solid;clear:left;">
          <div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 1</div>
          <div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 2</div>
          <div style="border:1px solid blue;float:left;width:200px;margin-right:20px;">tile 3</div>

      </div>
</div>

Answer 1

尝试使用 css 作为屏幕尺寸示例:@ media only screen and (min-width: 1550px) {}@ 仅媒体屏幕和(最大宽度:1449 像素){}