Html div元素在调整页面大小时不移动

我已经用div元素创建了这个网格，我需要的是当我调整浏览器的大小时，div元素应该向下移动。也就是说，一个2 x 2的网格变为一个1 x 4的网格。目前什么也没发生，浏览器只是在我的内容上移动

我真的没有任何线索，因为“表”需要有一个固定的大小，元素也需要有一个固定的大小，但是当浏览器的大小太小时，元素必须移动

Html

---

您正在明确定义外部容器的大小，因此-没有什么会改变这一点

我不会定义宽度或高度，永远。。。只需使用块级元素的自然默认值，即宽度：100%

然后，使用

最大宽度：800px或任何你想要的

您可以使用`@媒体查询根据屏幕大小制定规则



HTML

在这里，很难在一篇文章中描述CSS是如何工作的，但这应该能让你找到正确的方向。所有这些内联CSS规则让我相信有很多复制和粘贴正在进行。我建议从一个全新的心态开始

小提琴：这是什么您是否正在尝试创建一个响应性强的网站？默认情况下不会发生这种情况。

您需要一个可以作为响应布局使用的类

检查

此外，当您使用诸如“宽度：800px；”、“宽度：80%；”（如果没有父元素，则为父元素或屏幕的80%）或“宽度：80vw；”（浏览器窗口的80%）等固定大小时，元素无法调整大小，如果您想自己完成这一切，可能需要技巧

如果您想在没有引导CSS的情况下实现这一点：

<div class="innerwrap top">
    <div class="inner"></div>
    <div class="inner"></div>
</div>
<div class="innerwrap">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

将表上的
width:800px
更改为
max width:800px
如果您希望某个东西具有响应性，请不要使用
px
，因为
px
会使其固定，而与屏幕大小无关。最好使用
%
而不是
px
，因为
%
会根据屏幕大小进行调整。您可以在CSS中设置
minwidth
属性，以便在div必须低于
minwidth
时，下一个div移动到新行。这里有一个优雅的解决方案，可以在窗口太小时将2x2布局折叠为1x4布局。它适用于任何宽度和高度的内部元素。其工作方式是使用额外的包装器div来保持2x2结构

JSFIDLE示例（缩小预览框的大小以查看布局更改为1x4！）：

下面是内联代码：


.inner{
宽度：200px；
高度：200px；
利润率：10px；
背景：灰色；
}
.内包装{
浮动：左；
}

Bootstrap是编写代码的人不能真正理解CSS工作原理的一个主要原因，因此我不建议采用这种方法。它可能会影响一些事情，但如果你不理解CSS，即使是使用Bootstrap，也无法创建网站。我相信初学者自己做任何事情都会使CSS和其他文件过大，这会导致加载时间过长、失望和放弃-更不用说很长的开发周期，因为你不是专业人士。我需要一个responsize网站，当屏幕太小时，最右边的两个div会落在左边div的下面。尺寸必须保持不变。我知道bootstrap，但我正在为使用joombla的客户调整一个站点，我不知道如何让它在那里工作，但如果我将宽度更改为最大宽度，则在调整大小时所有元素都会变小，这是不应该的。如果你看JSFIDLE，那就是我想要的网格，它们应该保持这个大小，直到你不能再在一个屏幕上看到它们，因此div必须下降，然后你只需在单元格上放置一个最大宽度，它们自然会下降，因为它们是“位置：静态的”默认情况下。确实有很多复制和粘贴，因为我在继续别人的工作。我将按照你的建议重新开始。这没有完全的帮助，因为网格元素的大小也会改变，因为你可以修改内部元素的宽度。TBH，现在这里有更全面的答案。
.table 
{
    font-size: 1.2em; 
    width: 800px; 
    margin: 0 auto; 
    height: 565px; 
    background-color: #f0f0ee;
 }

.element 
{
    font-size: 1.2em; 
    font-family: monospace; 
    width: 48%; 
    border: 3px solid #FFF; 
    padding: 5px; 
    height: 50%; 
    float:left;
}

<ul class='grid'>
  <li>01</li>
  <li>01</li>
  <li>01</li>
  <li>01</li>
</ul>

.grid {
  margin: 0; padding: 0
  list-style: none;
  max-width: 800px;
}

.grid li {
  /* width: 100%; by default */
}

@media (min-width: 500px) {
  .grid li {
    width: 50%;
    float: left;
  }
}

<div class="innerwrap top">
    <div class="inner"></div>
    <div class="inner"></div>
</div>
<div class="innerwrap">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

.inner-wrap.top { 
    float: left; 
    width: 50%;
 }
.inner-wrap { 
    width: 50%;
 }

@media (max-width: 600px) {
   .inner-wrap.top { 
      float: none; 
      width: 100%;
   }
   .inner-wrap { 
      width: 100%;
   }
}