试图对齐div大小不同的位置，以便它们之间不会有空格 [英] Trying to align the position of div's which are of different sizes, so that there will not be any blank spaces between them
问题描述
请不要将我的问题视为重复。我只是没有成功尝试使用CSS显示不同大小的div
正如在上面的帖子中，我使用砌体。但没有得到它的工作。我正在使用codeigniter。
以下是我正在使用的css
#container {
width：90％;
保证金：3％0px 0px 10％;
}
.item {
margin：10px 10px 10px 10px;
float：left;
width：240px;
border：5px solid＃f0f0f0;
背景颜色：＃d2dbde;
border-radius：5px;
Javascript和js文件
<！ - 包含js文件 - >
< script type =text / javascriptsrc =http://www.myappdemo.com/KarmakExpo/js/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://www.myappdemo.com/KarmakExpo/js/jquery.masonry.min.js>< / script>
< script type =text / javascript>
$（function（）{
$（'＃container'）。masonry（{
// options
itemSelector：'.item'
}）;
}）;
< / script>
content
< div id =container>
< div class =item>
< div id =usericonstyle =width：240px; height：30px;>
<！ - - 内容 - >
< / div>
< div id =name>
<！ - - 内容 - >
< / div>
< div>
< a href =<？php echo $ link;？>>
< img src =<？php echo $ picture =（$ picture == null）？''：$ picture;？> width =240pxheight =auto>
< / a>
< / div>
我在div部分显示图片，名称，日期等
动态div放置在他们的位置
JsFiddle - Demo （列数取决于文档窗口的宽度）。
<因为它看起来有宽度正常的div，所以您可以尝试如下所示：
注意：自从首次回答这个简单的演示脚本，我大幅改变了链接的jsFiddle演示。它现在几乎没有类似于这个代码，但基本上几乎相同。
CSS有点像这样
div.column {
display：inline-block; / *列应该只与其设置一样宽，* /
vertical-align：top; / *应该水平放置，* /
width：240px; / *并垂直对齐。 * /
height：auto;
margin：10px 0px 10px 10px;
}
div.column div.row {
width：240px; / *所有行div的宽度相同，* /
height：auto; / *但高度不同* /
margin：0px 0px 10px 0px;
padding：0px;
背景颜色：＃00f0f0;
}
JavaScript有点像这样
（function（）{
var tdw = 240 + 0 + 10; // div宽度+ margin-left + margin-right
window.addEventListener（ load，function（）{
var ww = window.innerWidth，//需要多少宽度？
cn = Math.floor（ww / tdw），//多少列？
cdl = []，//内存
lc = 0，//交替
c = 0，//迭代
ncd; //元素对象
while（ c ++< cn）{
ncd = document.createElement（div）; //创建列
ncd.setAttribute（class，column）; // set their class
document.body.appendChild（ncd）; //添加到页面
cdl.push（ncd）; //记住它们
}
c = 0;
while（c ++< ; 100）{//这是演示//循环，直到没有更多
ncd = document.createEleme NT（ DIV）; //创建您的div
//这可能是您添加div内容的位置
ncd.setAttribute（class，row）; //设置他们的类
lc = lc< cdl.length？ lc：0; //作为父元素的备用列
cdl [lc ++]。appendChild（ncd）; //将div加到列
ncd.style.height =（200 * Math.random（））+px; // this for demo
//或者你可以通过innerHTML
}
}，false）添加内容;
}（））;
这个答案放在一起，同时假设很多。在问题中有更多的细节，我可以提供一个更完整的答案。
自从被要求解释...
据我理解的问题，它是找到一种方法来采取动态信息（从哪里提取无关紧要），并填写divs。每个div都将设置在页面（大概在feed容器或类似内容中）列中。由于这些宽度（让我们称它们为infodivs）infodivs具有一定的宽度，我们可以创建固定宽度的列来包含它们。现在，div可以自由设置为他们需要的高度（根据它们所包含的信息），并且将在它们的父元素 div.column load 中，我们测量可用宽度（在实时版本中记录偏移量等），并计算有多少列将水平放置，然后创建这些列。为了节省阅读和重新读取DOM，我们可以将列存储到一个数组中，以便以后查找。
创建列后，我们可以自由添加动态创建的列的信息，循环遍历列查找阵列，利用每个渐进列（在屏幕上从左到右）为每个新信息。一旦我们到达最后一列，我们将查找计数器设置回零，并继续加载infodivs。
该方法导致每列填充大约相同数量的信息divs（取决于数学）。然而，没有检查每个信息的高度，所以任何列可能以比其他列更长的内容结束。解决这个问题的方法是在创建每个新信息时测量每个列的高度，然后将该信息添加到最短的列中。这会导致列的高度更加接近。
注意：连接到此答案的演示jsFiddle现在包含一个基本的动态函数在创建信息时测量列高度。为了准确读取列高，每张图片都有一个临时的 onload 监听器，它触发了下一个信息的创建。监听器一旦完成就会被删除，这是释放资源的工作。这种方法减缓了整体页面加载速度，但不足以做到不切实际。根据 real 情况，更快更不准确的加载可能更为合意。在这种情况下，放弃图片的 onload 监听器，并根据需要创建infodivs，无论以前创建的状态如何。
进一步动态测量：通过添加 onscroll 可以改善大量数据和/或图像（特别是图像）的加载。监听器只有当访问者滚动到他们已经看到的结尾时才触发一个函数来加载新的数据（在这种情况下是infodivs）。这将有助于减轻服务器压力并提高浏览器的响应速度。另外：加载访问者永远不会滚动的内容是没有意义的。
所以伪代码中的代码就像这样：
屏幕有多宽？
Make（屏幕宽度除以列宽）列。
虽然我们创建了新的infodivs，但将它们添加到列中。
不要将它们全部添加到一列中，而是同样分享它们。
最终结果是动态创建的宽度相等的信息div ，但不同的高度，被列为专栏。他们的自然倾向是尽可能地高于他们的父母，所以他们总是坐在他们的信息之下。
由于列具有其显示属性设置为 inline ，他们会倾向于坐在并排的地方为他们留出空间。需要注意的是，如果列的父元素的宽度减小（在创建初始布局之后），最右边的列将被推到其他列的下方。
至于PHP - 这是另一个故事： - ）
Please don't consider my question as a duplicate. I just din't succeed trying Display divs with different sizes with CSS
As suggested in the above post i used Masonry. But failed to get it worked. I am using codeigniter.
Here are the css i am using
#container {
width:90%;
margin:3% 0px 0px 10%;
}
.item {
margin:10px 10px 10px 10px;
float:left;
width:240px;
border:5px solid #f0f0f0;
background-color:#d2dbde;
border-radius:5px;
}
Javascript and js files
<!-- include js files -->
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function() {
$('#container').masonry({
// options
itemSelector : '.item'
});
});
</script>
content
<div id="container">
<div class="item">
<div id="usericon" style="width:240px;height:30px;">
<!-- content -->
</div>
<div id="name">
<!-- content -->
</div>
<div>
<a href="<?php echo $link; ?>">
<img src="<?php echo $picture = ($picture == null) ? '' : $picture; ?>" width="240px" height="auto">
</a>
</div>
I am displaying images,name,date etc in div section
Dynamic divs put in their place
JsFiddle - Demo (number of columns depends on width of document window).
Since it appears you have divs of regular widths, you might try something like this:
Note: Since first answering with this simple demo script, I have substantially altered the linked jsFiddle demo. It now barely resembles this code, but the basics are pretty much the same.
CSS kinda like this
div.column {
display:inline-block; /* "Columns" should be only as wide as their setting, */
vertical-align:top; /* should sit next to each other horizontally, */
width:240px; /* and be vertically aligned. */
height:auto;
margin:10px 0px 10px 10px;
}
div.column div.row {
width:240px; /* All "row" divs are of the same width, */
height:auto; /* but of varying heights */
margin:0px 0px 10px 0px;
padding:0px;
background-color:#00f0f0;
}
JavaScript kinda like this
(function () {
var tdw = 240 + 0 + 10; // Div width + margin-left + margin-right
window.addEventListener("load", function () {
var ww = window.innerWidth, // how much width to play with?
cn = Math.floor(ww / tdw), // how many columns will fit?
cdl = [], // memory
lc = 0, // alternation
c = 0, // iteration
ncd; // element object
while (c++ < cn) {
ncd = document.createElement("div"); // create columns
ncd.setAttribute("class", "column"); // set their class
document.body.appendChild(ncd); // add to page
cdl.push(ncd); // remember them
}
c = 0;
while (c++ < 100) { // this for demo // loop until there're no more
ncd = document.createElement("div"); // create your divs
// this could be where you add your div content
ncd.setAttribute("class", "row"); // set their class
lc = lc < cdl.length ? lc : 0; // alternate column as parent
cdl[lc++].appendChild(ncd); // add the div to the column
ncd.style.height = (200 * Math.random()) + "px"; // this for demo
// or you could add the content via innerHTML
}
}, false);
}());
This answer was put together whilst assuming a lot. With more detail in the question, I could have provided a more complete answer.
Since being asked to explain...
As I understand the question, it is to find a way to take dynamic information (extracted from where is irrelevant), and fill divs with it. Each of those divs is to be set on the page (presumably within a "feed" container or similar) in columns. Since the width of these (lets call them "infodivs") infodivs is of a set width, we can create columns of fixed widths to contain them. Now the divs are free to be whatever height they need to be (according to the info they contain), and will simply stack up on top of each other, within their parent div.column.
On page load we measure the available width (in a live version accounting for offsets etc), and calculate how many columns will fit horizontally, then create those columns. To save reading and re-reading the DOM, we can store the columns to an array for easy look-up later.
After creating the columns, we are free to add the dynamically created infodivs to the columns, cycling through the column look-up array, utilizing each progressive column (left to right across the screen) for each new infodiv. Once we get to the last column, we set the look-up counter back to zero, and continue loading infodivs.
The method results in each column being filled with an approximately equal number of info divs (dependant on maths). There is however no check of the height of each infodiv, so any column could end up with much longer content than the others. A way around this would be to measure the height of each column as each new infodiv is created, then add that infodiv to the column which is shortest. This would result in columns remaining more closely equal in height.
Note: The demonstration jsFiddle connected to this answer now contains a rudimentary function to dynamically measure the column heights as infodivs are being created. In order to get an accurate reading of the column height(s), each image has a temporary onload listener attached which triggers the creation of the next infodiv. The listener is removed as soon as it's done it's job to free up resources. This method slows overall page loading, but not enough to be impractical. Depending on real circumstances, faster less accurate loading might be more desirable. In that case, discard the image's onload listeners and create infodivs on demand regardless of the state of those previously created.
Further to dynamic measurement: The loading of large amounts of data and/or images (especially images) could be improved by the addition of an onscroll listener triggering a function to load new data (infodivs in this case) only when the visitor is scrolling toward the end of what they already see. This would serve to reduce server stress and increase browser response. Plus: there's no point loading what the visitor may never scroll to look at.
So the code in pseudo terms is something like:
How wide is the screen? Make (screen-width divided by column-width) columns. While we have new infodivs being created, add them to the columns. Don't add them all to one column, but shared them out equally.
The end result is dynamically created divs of info of equal widths, but varying heights, being laid out in a columnized fashion. Their natural tendency is to be as high up their parent as possible, so they'll always be sitting just beneath the infodiv above them.
Since the columns have their display property set to inline, they'll tend to sit side by side where there is space for them. A caveat is that if the width of the column's parent is reduced (after the initial layout is created), the right-most column will be pushed below its fellow columns.
As for the PHP - That's another story :-)
这篇关于试图对齐div大小不同的位置，以便它们之间不会有空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
