Html 砌体分区自动定位 问题
我不知道如何使div自动定位，而不是在div可以进入的地方留下大块空间。我想知道第一个和第二个div下面的div是否在正下方。当前的标记和样式表如下所示。这方面的任何帮助都会很好！非常感谢。通过将css和html复制并粘贴到相应的输入文本字段中，可以看到效果 解决方案 我首先删除了标题中的无效javascript链接，并将其作为脚本引用移动到body标记的末尾。我将HTML页面中的更改为。然后，我引用了jquery库以及一个自定义javascript文件，我在其中创建了一个砌体实例。请查看回复帖子中的一个片段Html 砌体分区自动定位 问题,html,twitter-bootstrap,position,jquery-masonry,masonry,Html,Twitter Bootstrap,Position,Jquery Masonry,Masonry,我不知道如何使div自动定位，而不是在div可以进入的地方留下大块空间。我想知道第一个和第二个div下面的div是否在正下方。当前的标记和样式表如下所示。这方面的任何帮助都会很好！非常感谢。通过将css和html复制并粘贴到相应的输入文本字段中，可以看到效果 解决方案 我首先删除了标题中的无效javascript链接，并将其作为脚本引用移动到body标记的末尾。我将HTML页面中的更改为。然后，我引用了jquery库以及一个自定义javascript文件，我在其中创建了一个砌体实例。请查看回复帖
我将把问题和解决方案留在这里，以防像我这样的砖石新手在第一次尝试时被卡住。答案显示在问题的下方。下面是代码段的副本 $document.readyfunction{ var masonryContainer=document.querySelector'mashise'； var圬工=新MasonrymasonryContainer{ //选择权 itemSelector:“.item” }; }; 项目 { 宽度：20em； 高度：自动； 浮动：左； 背景色：rgba0，255，0，0.3； 边缘：0.5em； 单词包装：打断单词； 字体大小：大号； 填充：0.5em； } 你好，世界！ 文本 文本文本文本文本文本文本文本文本文本文本文本文本文本 文本 文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本
没有代码笔链接为空，缺少网格大小调整器和边沟大小调整器。看看这些文件。使用加载的图像，提供实际内容的示例。比较一下砖石和派克的区别，你可能会想到派克。谢谢克里斯蒂娜！我已经更新了这个问题，因为我已经找到了解决方案。我还发布了一个带有片段的答案。
# main.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.item
{
width: 20em;
height: auto;
float: left;
background-color:rgba(0, 255, 0, 0.3);
margin: 0.5em;
word-wrap: break-word;
font-size: large;
padding: 0.5em;
}
<!DOCTYPE html />
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://masonry.desandro.com/masonry.pkgd.min.js" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
<div class="masonry">
<div class="item">
text
</div>
<div class="item">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</div>
<div class="item">
text
</div>
<div class="item">
text
</div>
<div class="item">
texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</div>
<div class="item">
text
</div>
</div>
</div>
</body>
</html>