使用某个API时,我使用的功能基本上为我提供了几十种类别的设置。为了显示这些,我选择了一个容器DIV并按组拆分设置(4x 25%宽度表),其中每个被解析的组都会出现。
这适用于可变数量的设置的小问题,导致剩余大量未使用的空间。这是由于我将所有内容都浮动而造成的,但是最长的表会导致下一个表格显得更加偏低。
CSS是否支持任何允许将这些表浮动到未使用空间的内容?我突出了屏幕截图中最大的表格以强调。
答案 0 :(得分:1)
查看http://masonry.desandro.com/
我将它用于当前项目是好事。我目前在下拉列表中发现Bootstrap和浮动元素的一些问题。虽然没有什么会导致我放弃插件。
答案 1 :(得分:-1)
试试这个JS方法:
<script>
function renderGrid() {
var blocks = document.getElementById("container").children;
var pad = 10,
cols = 4, //Change this to as much as you want but in this It's 4
newleft, newtop;
for (var i = 1; i < blocks.length; i++) {
if (i % cols == 0) {
newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
blocks[i].style.top = newtop + "px";
} else {
if (blocks[i - cols]) {
newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
blocks[i].style.top = newtop + "px";
}
newleft = (blocks[i - 1].offsetLeft + blocks[i - 1].offsetWidth) + pad;
blocks[i].style.left = newleft + "px";
}
}
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
</script>
现在是HTML部分:
<div id="container">
<div><p>Your content here!</p></div>
</div>
关于它,但确保你有一个id="container"
而不是class="container"
也在你的CSS文件中添加这个CSS样式:
#container > div {
position: absolute;
float: left;
width: 25%;
}
结果:使用自动顶部和左侧元素样式自动对齐div。
希望这有效! -Arqetech