网格布局不均匀
这是一个例子。
我想要所有的绿色框和蓝色方框一个接一个地排列,除了既定的边距外,没有大的间隙。由于某种原因,蓝色列中的第二个元素抱怨对齐。如果我以错误的方式处理这个问题,有人有任何建议,或者可以提供指导吗?我不想预定义列,但除此之外我对任何事情都持开放态度。谢谢!
Here is the example.
I'm wanting all of the green boxes and blue boxes to fall into order one after the other with no large gaps, aside from the established margins. For some reason, the second element in the blue column is complaining about alignment. Does anyone have any suggestions, or could provide guidance if I am approaching this the wrong way. I don't want to predefine columns, but other than that I'm open to anything. Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
除了 Google Chrome 和 FF 之外,未经任何测试,但您可以尝试使用 float: left 和 margin-left:
http: //jsfiddle.net/wnud4/7/
Untested in anything except Google Chrome and FF but you could try using a combination of float: left and margin-left:
http://jsfiddle.net/wnud4/7/
您可以只在左列上使用
float: left
,并在右列上使用margin-left
,而不是在两列上都使用浮动,以将这些 div 推过去浮动的div。然后你只需要清理你的宽度和边距以保持一切均匀。这是一个示例: http://jsfiddle.net/UZY6t/2/
Rather than using floats on both columns, you could only use
float: left
on the left column, and simply usemargin-left
on the right column, to push those divs past the floated divs. Then you'd just need to clean up your widths and margins to keep everything even.Here's an example: http://jsfiddle.net/UZY6t/2/