HTML/CSS：重新排列浮动div'；浏览器窗口大小更改后的_Html_Css_Responsive Design_Tumblr

HTML/CSS：重新排列浮动div'；浏览器窗口大小更改后的

html css responsive-design

HTML/CSS：重新排列浮动div'；浏览器窗口大小更改后的,html,css,responsive-design,tumblr,Html,Css,Responsive Design,Tumblr,我目前正在为我的一个朋友的博客创建一个新的Tumblr主题。新的主题包括像无限滚动这样的内容，并且应该根据帖子内容的长度将帖子安排在一个网格中。我使用的是响应性设计，它基本上区分了两种尺寸：第一种是非常小宽度的浏览器窗口（例如智能手机，但也在台式机上）。在这种情况下，文章应在一列中相互下方排列，并使用整个屏幕宽度第二个用于处理更宽的浏览器窗口（例如桌面）。这里的帖子是浮动的，按多个列排序，正如预期的那样工作然而，我现在遇到了一个我无法解决的问题：当我将浏览器窗口的大小调整为非常薄时，这

我目前正在为我的一个朋友的博客创建一个新的Tumblr主题。新的主题包括像无限滚动这样的内容，并且应该根据帖子内容的长度将帖子安排在一个网格中。我使用的是响应性设计，它基本上区分了两种尺寸：

第一种是非常小宽度的浏览器窗口（例如智能手机，但也在台式机上）。在这种情况下，文章应在一列中相互下方排列，并使用整个屏幕宽度
第二个用于处理更宽的浏览器窗口（例如桌面）。这里的帖子是浮动的，按多个列排序，正如预期的那样工作

然而，我现在遇到了一个我无法解决的问题：当我将浏览器窗口的大小调整为非常薄时，这些帖子在一列中排列在彼此的下面（这是预期的行为）。如果我现在调整一点大小，使其更薄，则帖子容器的宽度确实会适应，但帖子的位置不会。这就导致了单个帖子彼此重叠，并且在这两者之间不再有边距。但是，如果此时刷新页面，问题确实解决了，结果看起来应该是这样的（帖子完全可见，帖子之间的边距也可以）

因此，我的问题是，如何在不刷新整个页面的情况下更改主题以获得预期的结果

为了避免误解我的问题，您可以在下面的测试博客中看到主题的结果。因为我不知道提供完整的Tumblr主题（大约800行代码长）是否有帮助，所以我随后只提供基本方案。如果我要提供任何进一步的信息，甚至完整的主题，请不要犹豫与我联系。如果您能帮助解决此问题，我们将不胜感激

编辑：只是为了确定一下，我已经在这里搜索过了，也用谷歌搜索过了。我也找到了一些解决方案（clearfix，等等），但我的主要问题是我不知道如何正确使用它们来确保我想要的行为

    <-- All CSS information is temporarily stored here -->
    <style>
        ...

        <!-- High resolution devices or browser windows should show multiple columns -->
        @media screen and (min-width: 800px)
        {
            #sidebar, .entry
            {
                word-wrap: break-word;
                width: {text:Post Width} !important;
                padding: 20px;
                margin: 0 10px 20px 10px;

                {block:PermalinkPage}
                max-width: {text:Permalink Page Post Width} !important;
                width: 60vw !important;
                margin: 0 auto 20px auto;
                {/block:PermalinkPage}
            }
        }

        <!-- Smaller resolution devices or browser windows should only show 1 column -->
        @media screen and (max-width: 800px)
        {
            #sidebar, .entry
            {
                word-wrap: break-word;
                width: 90vw !important;
                padding: 10px;
                margin: 0 5px 10px 5px;

                {block:PermalinkPage}
                margin: 0 auto 10px auto;
                {/block:PermalinkPage}
            }
        }
    </style>
</head>
<body>
    ...

    <div id="navigation">...</div>

    <!-- Wrapper the whole space -->
    <div id="posts-wrapper">
        <!-- Wrapper for all posts -->
        <div id="posts">
            <!-- The sidebar looks like the first post -->
            <div id="sidebar">...</div>

            <!-- Wrapper for a single post containing text and details (reblog, tags, date and time) -->
            <div id="{PostID}" class="entry">

                {block:Text}
                <div class="text">...</div>
                {/block:Text}

                <div class="details">...</div>
            </div>
        </div>
        ...
    </div>
    ...
</body>


...
@媒体屏幕和屏幕（最小宽度：800px）
{
#边栏，.entry
{
单词包装：打断单词；
宽度：{text:Post width}！重要；
填充：20px；
利润率：0 10px 20px 10px；
{block:PermalinkPage}
最大宽度：{text:Permalink Page Post width}！重要；
宽度：60vw！重要；
保证金：0自动20px自动；
{/block:PermalinkPage}
}
}
@媒体屏幕和屏幕（最大宽度：800px）
{
#边栏，.entry
{
单词包装：打断单词；
宽度：90vw！重要；
填充：10px；
保证金：0 5px 10px 5px；
{block:PermalinkPage}
保证金：0自动10px自动；
{/block:PermalinkPage}
}
}
...
...
...
{block:Text}
...
{/block:Text}
...
...
...

您可以包括一个JSFIDLE吗？-您可以找到JSFIDLE。然而，我不知道这是否很有用。正如我前面提到的，Tumblr主题目前正在进行中。此外，所有HTML、CSS和Javascript代码目前都写在一个文件中。我知道这是一种糟糕的设计/风格，但目前这是必要的，因为在进行一次调整后，我必须再次上传每个文件。此外，上传的JSFIDLE代码也使用了特定的Tumblr块，因此预览没有显示太多有用的信息。