左alignment元素中心网格中的最后一行
我有一堆相同大小的块设置为display:inline-block div内的text-align:center设置为alignment块。
| _____ _____ _____ _____ | | | | | | | | | | | | | 1 | | 2 | | 3 | | 4 | | | |_____| |_____| |_____| |_____| | | _____ _____ _____ _____ | | | | | | | | | | | | | 5 | | 6 | | 7 | | 8 | | | |_____| |_____| |_____| |_____| | | |
这些块水平填充div，并且随着浏览器窗口缩小，一些块分裂成新的行，创build更多的行和更less的列。 我希望一切仍然保持居中，最后一行与左边齐平，如下所示：
| _____ _____ _____ | | | | | | | | | | | 1 | | 2 | | 3 | | | |_____| |_____| |_____| | | _____ _____ _____ | | | | | | | | | | | 4 | | 5 | | 6 | | | |_____| |_____| |_____| | | _____ _____ | | | | | | | | | 7 | | 8 | | | |_____| |_____| | | |
目前发生的是这样的：
| _____ _____ _____ | | | | | | | | | | | 1 | | 2 | | 3 | | | |_____| |_____| |_____| | | _____ _____ _____ | | | | | | | | | | | 4 | | 5 | | 6 | | | |_____| |_____| |_____| | | _____ _____ | | | | | | | | | 7 | | 8 | | | |_____| |_____| | | |
我不能像一个build议一样添加额外的填充div，因为可以有任意数量的块，并且行和列的数量将根据浏览器宽度而变化。 出于同样的原因，我也不能直接devise第7块。 无论有多less列，块必须始终居中 。
这是一个笔，以更好地展示：
这可能吗？ 我觉得应该可以。 我宁愿不使用flexbox，因为它只是ie10 +，我想ie9 +。 我真的很喜欢纯粹的CSS解决scheme，但如果你告诉我JS是唯一的方法，我很乐意看到这一点。
作为参考 – 类似的问题，虽然没有被彻底解释：
如何alignment多行柔性盒中最后一行/最后一行
CSS – 将居中的div中的最后一行图像alignment
修复在stream体容器网格中最后一行元素居中alignment，同时容器保持居中
使用CSS居中多个内联块，并将最后一行alignment左侧
这里有一个非常简单的JavaScript（和你的CSS中的一些小的改变）解决scheme：
这对我来说工作得很好。
CSS：
.container { margin: 0 auto; max-width:960px; background-color: gold; } .block { background-color: #ddd; border:1px solid #999; display: block; float: left; height: 100px; margin: 4px 2px; width: 100px; }
JavaScript的：
$(document).ready(function(){ setContainerWidth(); }); $(window).resize(function(){ setContainerWidth(); }); function setContainerWidth() { $('.container').css('width', 'auto'); //reset var windowWidth = $(document).width(); var blockWidth = $('.block').outerWidth(true); var maxBoxPerRow = Math.floor(windowWidth / blockWidth); $('.container').width(maxBoxPerRow * blockWidth); }
jQuery是必需的:)
显示内嵌块的解决scheme
这种自适应网格要简单得多：较less的标记和较less的CSS，因此在生产站点实现起来更容易，并能够适应您的确切需求。
= >> DEMO << = （调整结果窗口的大小以查看效果）
html, body { margin:0; padding:0; } #container{ font-size:0; margin:0 auto; width:1000px; } .block { font-size:20px; width: 150px; height: 150px; margin:25px; background: gold; display:inline-block; } @media screen and (max-width: 430px) { #container{ width:200px; } } @media screen and (min-width: 431px) and (max-width: 630px) { #container{ width:400px; } } @media screen and (min-width: 631px) and (max-width: 830px) { #container{ width:600px; } } @media screen and (min-width: 831px) and (max-width: 1030px) { #container{ width:800px; } }
<div id="container"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> <div class="block">9</div> <div class="block">10</div> <div class="block">11</div> <div class="block">12</div> <div class="block">13</div> </div>
对于什么是值得的：现在是2017年， 网格布局模块开箱即用
* { margin:0; padding:0; } .container { display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 10px; justify-content: center; align-content: flex-start; margin: 0 auto; text-align: center; margin-top: 10px; } .block { background-color: #ddd; border: 1px solid #999; height: 100px; width: 100px; }
<div class="container"> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> </div>
有了flexbox，一些伪元素，一个额外的div，经过很多的挫折后，我能够实现这个没有媒体查询（因为我需要把我的网格内部的许多不同大小的元素，媒体查询不会真的为我工作） 。
一个警告：物品之间的沟槽是stream体。
演示： http : //codepen.io/anon/pen/OXvxEW
CSS：
.wrapper { display: flex; flex-wrap: wrap; border: 2px solid #ffc0cb; max-width: 1100px; margin: 0.5rem auto; justify-content: center; } .wrapper:after { content: ' '; flex: 1; height: 100%; border: 1px solid #00f; margin: 0.5rem; } .child { flex: 1; border: 2px solid #ffa500; min-width: 300px; margin: 0.5rem; text-align: center; } .child-contents { width: 300px; border: 2px solid #008000; height: 100px; margin: 0 auto; }
HTML：
<div class='wrapper'> <div class='child'> <div class='child-contents'></div> </div> <div class='child'> <div class='child-contents'></div> </div> <div class='child'> <div class='child-contents'></div> </div> ...etc., more .child's... </div>
最终的结果就是这样，绿色的矩形是div。 粉色/橙色边框仅供参考，所以您可以看到发生了什么事情。 如果你删除粉红色/橙色的边框，你应该得到你正在寻找的网格（ 虽然再次，请注意，排水沟是stream体 ）。
对于您的问题，没有“正常”的解决scheme，只有提到的“解决方法”。
情况是，你的容器块将填满可用空间，直到最大可用/设置，然后将所有内部块拆分到下一行，这将导致容器溢出。 另外，像浮动其他configuration将是相同的行为。 这就是渲染工作的方式 – 每次在空间中贪婪地计算内部元素的行为。
也许未来的Flexboxes将使这成为可能 – 但我没有阅读完整的规格。 只是一个猜测…
使用flexbox：
.container { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; flex-wrap:wrap; } .block { background-color: #ddd; border:1px solid #999; display: inline-block; height: 100px; margin: 4px 2px; width: 100px; }
完成。
试试这个简单的CSS：
CSS：
.row {text-align：center; font-size：0;} .block {text-align：center; display：inline-block; width：150px; height：15px; margin：5px; border：1px solid #dddddd; font-size：13px;}
HTML：
<div class="row"> <div class="block"></div> </div>
.row{text-align:center;font-size:0;} .block{text-align:center;display:inline-block;width:150px;height:150px;margin:5px; border:1px solid #dddddd;font-size:13px;line-height:150px;}
<div class="row"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> <div class="block">5</div> <div class="block">6</div> <div class="block">7</div> <div class="block">8</div> </div>
到目前为止，唯一干净的解决scheme是与
CSS网格布局模块 （ Codepen演示 ）
基本上相关的代码需要归结为：
ul { display: grid; /* (1) */ grid-template-columns: repeat(auto-fill, 120px); /* (2) */ grid-gap: 1rem; /* (3) */ justify-content: center; /* (4) */ align-content: flex-start; /* (5) */ }
1）使容器元素成为网格容器
2）设置网格的宽度为120px的“自动”数量的列。 （自动填充值用于响应式布局）。
3）为网格行和列设置间隙/排水沟。
4）和5） – 类似于flexbox。
body { margin: 0; } ul { display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-gap: 1rem; justify-content: center; align-content: flex-start; /* boring properties: */ list-style: none; width: 90vw; height: 90vh; margin: 2vh auto; border: 5px solid green; padding: 0; overflow: auto; } li { background: tomato; height: 120px; }
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul>
