该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

要求：定义多个div元素"text"，其中text是文本文字，每个div内的文本的长度不定。

1)div横向排列，且横向排列的div超出父级宽度时，能自动换行。

2)换行的div左对齐，即每行的第一个div实现列对齐。

3)每行挨在一起的左右两个div之间有固定的间距，也就是留白，比如50px。(即，除第一个div有列对齐外，右边的div无需列对齐)

4)最右边的一个div，其宽度的右边，可以到达父级宽度的最右边。也就是说对于最右边的div，它的右边不需要留白。

以上4项为全自动，自适应排版。

具体示例如下：

【A 当页面宽度正常时】

|-------------------------------------------| /*这里表示父级宽度*/

|---| |---| |---| /*这里表示留白间距固定*/

texttexttexttext text texttext /*第一行div*/

texttexttexttext text texttextaa /*第二行，第4个div发生了折行*/

|-| /*这里表示第二行最右边的div(第6个div)，其右边留白不需要控制到固定宽度*/

texttexttexttext text texttextaa /*第三行，第7个div发生折行*/

|-------------------------------------------| /*这里表示父级宽度*/

【B 当页面宽度变小时】

|-------------| /*这里表示父级宽度*/

texttexttextt /*第1个div，文字内容自动折行，注意此处右边没有留白*/

ext

text /*因为前1个div宽度占满整行，第2个div自动折行，列对齐*/

texttext /*第3个div如排在第2个后面的话，再加上中间的留白，会超出宽度，所以也自动折行*/

......

|-------------| /*这里表示父级宽度*/

这4项要求，前三项组合可实现，但同时满足第4项，不知如何实现。

请高手解决一下这个问题。