Javascript 如何使用html和css填充空白

我正在建立一个社交媒体网站

在像3k和4k这样的大屏幕上，我试图在使用float:left时，让posts填充缺少的空间

我想让左列来填补这些空白，因为当右侧有较大的帖子时，右列将留下一个较大的空白并开始一个新行

我无法显示原始代码，因为代码只有几百行，但html的输出是：

<div class="post" id="570">
            <div id="report570" style="display:none;padding:10px;border-bottom:1px solid black;background-color:#F6F7F8;">
                Type: <select name="reporttype" id="reporttype570" class="formFields" style="padding:5px;border-radiuse:4px;border:1px solid #D0D0D0;">
                    <option value="0">Spam</option>
                    <option value="1">Harassment</option>
                    <option value="2">Sexual content</option>
                    <option value="3">Suicidal/Abuse</option>
                </select>
                <div class="compost-innerwrap" style="margin-top:10px;">
                    <textarea name="4" class="reportenter" id="reportbox570" placeholder="What do you think we need to know?"></textarea>
                </div>
                <div id="submit" onclick="sendreport(570)">
                    Report
                </div>
                <div style="clear:both;"></div>
            </div>
            <div onclick="disPostOpt()" id="postmenu5704" class="postmenu"><img src="/images/siteimage/more9.png" height="24"></div>
            <div id="postopt5704" class="postmenuoptions">
                <ul>
                     <li><div class="postOpt"><a href="javascript:(0);" onclick="reportPostModal(570)">Report post</a></div></li>
                     <li> <div class="postOpt"><a href="javascript:void(0)" onclick="deletepost(570)">Delete...</a></div></li>
                                                    <li><div class="postOpt"><a href="javascript:(0);" onclick="admindel(570)">Admin delete</a></div></li>
                                                </ul>
            </div>
            <div class="bodyclick"></div>
            <script>
                var postOpt = 1;
                $(document).ready(function()
                  {
                  $("#postmenu5704").click(function(){
                      if(postOpt == 1){  
                      $("#postopt5704").fadeIn(100);
                      $(".bodyclick").fadeIn(50);
                      postOpt = 2;
                      } else if(postOpt == 2) {
                      $("#postopt5704").fadeOut(100);
                      $(".bodyclick").fadeOut(50);
                      postOpt = 1;
                      }
                  });    
                  $(".bodyclick").click(function(){
                    $("#postopt5704").fadeOut(100);
                    $(".bodyclick").fadeOut(50);
                    postOpt = 1;
                  });
                    $(".postOpt").click(function(){
                    $("#postopt5704").fadeOut(100);
                    $(".bodyclick").fadeOut(50);
                    postOpt = 1;
                  });
                });
            </script>
            <div id="posttext">
                <div style="background: #FFFFFF url('Members/4/4.jpg') no-repeat; background-position: 50% 25%; background-size: cover;" class="imgpicstatus"></div>                    <div class="usernamebox"><a href="profile.php?id=4" class="username">Zachary Clinko</a></div>
                <p id="timestamp" style="display:inline;">March 20 at 12:24 AM - Near: </p><p style="display:inline;" id="timestamp">Florissant, Missouri</p>
                <div class="statustext">Got a 2k or 4k computer screen, just wait a couple more days and we'll have a fix for you very soon! <div id="youtubeholder"><div id="dummy"></div><iframe width="300" height="180" src="//www.youtube.com/embed/QWzW1TxonTM?controls=0&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe><div class="vidinfo"><a href="http://www.youtube.com/watch?v=QWzW1TxonTM" target="_blank" class="posttitle">The Ready Set - "Love Like Woe"</a><br><font class="postdescription">Comments are enabled now. <br>
<br>
Comment saying "BARAKITTY" if you're reading this.<br>
<br>
I used photoshop to make this video. It took me 7 hours. I know some lyrics are misspelled/wrong, I did it by ear. I kno</font></div></div> oh btw random song</div>
                                    <div class="sparkbar">
                    <div class="vote"></div>
                    <div class="sparkcount" id="sparkcount570"><span id="sparkspan570" style="color:#1AC32C;">+1</span></div>
                                                        <div class="updown">
                                <a id="like570" style="cursor:pointer;" onclick="like(570)">Remove up vote</a> · <a style="cursor:pointer;" id="dislike570" onclick="dlike(570)">Down</a>
                            </div>
                                                                        <a href="" style="padding: 5px 15px 5px 5px;display: block;float: right;">All</a><a href="" style="padding: 5px;display: block;float: right;">1 Replies</a>
                                        </div>
                <div class="dislikebar" id="dlikebar570" width="100%" style="background-color:red;min-height:4px;">
                    <div class="likebar" id="likebar570" style="float:left;min-height:4px;background-color:#167ac6;width: 100%;"></div>
                </div>
            </div>
            <div class="commentholder" style="overflow:hidden;">
                                            <div class="usercomment" id="comm248">
                            <div style="background: #FFFFFF url('Members/4/4.jpg') no-repeat; background-position: 50% 25%; background-size: cover;width:30px;height:30px;float:left;" class="imgpic"></div><div class="info"><a href="profile.php?id=4" class="username">Zachary Clinko</a> <div class="postOptComm"><a href="javascript:(0);" onclick="deletecomm(248);"><img title="Delete Comment" src="images/siteimage/prohibited.png" height="20"></a></div></div><div class="statustextcm"><div style="max-width: 565px;">testing</div></div>                               
                            <div class="timendata"><span class="timestamp">Posted:
                                Wednesday at 4:41 PM</span><span class="nolikethis"> · <div style="display: inline-block;" id="likecommcount570">No one likes this</div> · <a href="javascript:void(0)" id="likecomm248" onclick="likecomm(248)">Like</a></span>
                            </div>
                        </div>
                                            <div class="makecomment" id="comment570">
                        <div class="compost-innerwrap">
                        <textarea name="4" class="postenter" id="570" placeholder="What do you have to say?"></textarea>
                        </div>
                    </div>
                                </div>
        </div>

在4k屏幕上，它是：

@media (min-width: 3900px) {
    .post{
        width: 45% !important;
        float:left;
        margin:10px !important;
    }
}

更明显的空白

---

试试Packy，即箱子包装布局库，或者换言之，可以帮助解决间隙的算法。以下是链接：

我已经查看了该网站，但不知道您指的是哪些空白？我在图片中显示了它，如果您查看的是实时网站，您必须登录并发布一些较大的帖子。图片太小，无法看到这些内容，但我唯一能建议的是使用：此处，我在底部添加了一个第二个图像来显示更多空白的空间，我正在看它，我会告诉你它是否有帮助：“TNX对于回复，我只是在分析你的代码，但是现在它已经完成了，我退出XDI，知道你的意思，我已经经历了它的每一行的几天，最后决定到这里来，我在想我应该转向javascript或jquery。

@media (min-width: 3900px) {
    .post{
        width: 45% !important;
        float:left;
        margin:10px !important;
    }
}