Question

我在这个网站上做了一些搜索，发现了一些与砌体砌块宽度有关的问题，但不是这个问题。如果我忽略它，我会提前道歉。

我的问题是我使用砌体jquery在响应容器中布局框，我正在设置块宽度和百分比。它似乎在表面上起作用，但是一旦我调整屏幕大小，框和边距就会出现不可预测的行为（对我来说）并且我无法将我的大脑包裹在正在发生的事情中。

最终，我的目的是在几个断点处更改带有媒体查询的框的百分比宽度（当我确定列太窄而不能留下内容时 - 最终将是文本可读的）。但我还没有达到这一点，因为我注意到了这种我没想到的行为。

我创造了一个小提琴来证明这个问题：

这是我的HTML：

<div id="myContainer">

<div id="myContent">

    <div id="myMasonry">    

        <div class="box height1"></div>
        <div class="box height2"></div>
        <div class="box height3"></div>

        <div class="box height2"></div>
        <div class="box height3"></div>
        <div class="box height1"></div>
        <div class="box height1"></div>
        <div class="box height2"></div>
        <div class="box height2"></div>
        <div class="box height3"></div>
        <div class="box height3"></div>
        <div class="box height1"></div>

        <div class="clearfix"></div>

    </div><!--#myMasonry-->

</div><!--#myContent-->

</div><!--#myContainer-->

这是我的CSS：

#myContainer {
max-width:1000px;
margin:0 auto;
padding:0 30px;
background-color:#D7D4F0;
}
#myContent {
width:100%;
background-color:#FFD2A3;
}
#myMasonry {
width:100%;
}
.box {
float:left;
width: 26%; 
padding:2%;
margin:0 3% 20px 0;
background:#666;
}
.height1 {
height:100px;
}
.height2 {
height:160px;
}
.height3 {
height:210px;
}
.clearfix {
clear:both;
}

哇。希望这不是太冗长。在此之前，感谢任何人的帮助：）

免责声明：我承认布局不会复制我的确切情况（我使用的确切Javascript是不同的，但是我无法获得我用于小提琴的代码，而且我对它的理解最多也是有限的）和我的实际HTML有点不同（它是WP二十二的儿童主题，所以结构有点复杂），虽然我明白这可能会失败在这里发布，这个小提琴会复制我的问题，所以基于这个例子，我希望它可以解决，或者我可以开悟。

更新：我刚刚注意到，如果我调整窗口大小，它看起来很奇怪并创建奇怪的边距（太小或太大），但如果我实际刷新页面（当查看小提琴的全屏视图时）或更新小提琴，然后正确重新排列。嗯......这只是我必须忍受的事情吗？

**我在SO上发现了另一个问题，问题完全相同，但没有发布解决方案：Issue With Responsive Masonry Layout **

为什么在响应容器中使用百分比宽度的砌体jquery时会出现不规则的边距

0 个答案: