Question

尝试在数小时后使用引导程序正确构建响应式布局。我的目标是在显示器调整大小时将固定宽度的瓷砖包裹在彼此之下，但如果在侧边栏右侧的div中仍有足够的宽度来显示它们，则不会在侧边栏div下包裹。

使用下面的例子，我希望瓷砖在彼此之下和“过滤器和搜索”div下面，但不是在最左边的“content”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）{} @ media only screen and（max-width：1449px）{}

浮动左包装父而不是嵌套的div

1 个答案: