流体宽度与等间距DIV +最后一行左对齐 [英] Fluid width with equally spaced DIVs + last row left aligned
问题描述
但是因为我有一对夫妇在响应式布局中包含更多行。
这当然会发生：
- ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
但我喜欢这样：
------ ------ - -
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
我认为text-align-last：left可以工作，但它可以工作，但它是一个解决方案，
想要一个可能的解决方案：
我想出了一个可能的javascript解决方案，但我需要你的帮助。
这是我的想法一个可能的解决方案：
要使最后一行左对齐，我们实际上需要使用不可见框来填充那些缺少的空格。我们可以用手轻松地做，但是div的数量是用户生成的，总是不同的。
所以杂草需要知道缺少的盒子数量，并将它们附加到
所以这里是我的（婴儿）srcpting的想法：
1。计数所有div
2.将它们与4（因为我们有4在一行）
3.如果SolutionA没有小数，将不会发生，因为一切都是好的
4.如果解决方案A有一个小数，删除它
5. SolutionA + 1 = SolutionB
6.解决方案B x 4（因为我们有一个每行4）= SolutionC
7. SolutionC - SolutionA = Number的div，我们需要添加。
我不知道是否有办法找出行中已经有多少项传递给javascript。这将是一个很好的原因，然后格式将适用于响应布局，而不调整行号，每次它们随浏览器宽度变化。
这是一个好主意吗？
我希望有些人愿意这样做。
/ strong> http://jsfiddle.net/L2mPf/
谢谢。
查看我的回答。
好的，这是css的简单的解决方案：
只需添加一行的多少div 4），给他们1px的高度。
没有任何东西可以看见，并且所有的效果都像没有javascript的魅力。
这是新的小提琴：http://jsfiddle.net/L2mPf/1/
感谢@GGG用于集中我的css和这个解决方案。
I have fixed width boxes in a fluid layout and text-align: justify them with this posted solution:
Fluid width with equally spaced DIVs
But since I have a couple of more rows in a responsive layout.
This is of course happens:
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
But I like to have it like this:
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------ ------
| | | | | | | |
| | | | | | | |
------ ------ ------ ------
------ ------ ------
| | | | | |
| | | | | |
------ ------ ------
Of course justify does it's job but is there a solution to this without using javascript to do this?
I thought text-align-last: left could work, but it doesn't and it's not official eather yet.
Idea for a possible solution:
I came up with a possible javascript solution but I need your help for that.
Here's my idea for a possible solution:
To get the last line left aligned we would actually need to fill those missing spaces with invisible boxes. We could easily do that by hand but the number of divs are user generated and always different.
So weed need to know the number of boxes that are missing and append them to those we already have, to make it work:
So here is my (infantile) srcipting idea:
1. Count all divs
2. Divide them with 4 (cause we have 4 in a row)
3. If the SolutionA has no decimal, nothing will happen cause all is good
4. If the SolutionA has a decimal, remove it
5. SolutionA + 1 = SolutionB
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC
7. SolutionC - SolutionA = Number of divs we need to add.
I don't know if there is way to find out how many items are already in a row to pass that to javascript. This would be good cause then the formular would work for a responsive layout without adjusting the row number with each time they change with the browser width.
Is this a good idea?
I hope some would like to do this.
Here's a fiddle to work with: http://jsfiddle.net/L2mPf/
Thank you.
See my answer beyond.
Ok, here's the damn easy solution with css:
Simply add so many divs of how many in a row would be (in this case 4) and give them a height of 1px.
Nothing to see and all works like charm without javascript.
Here's the new fiddle: http://jsfiddle.net/L2mPf/1/
Thanks to @GGG for focusing me back on css and this solution.
这篇关于流体宽度与等间距DIV +最后一行左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
