Css 如何在div中均匀分布一组跨距?

Css 如何在div中均匀分布一组跨距?,css,Css,我的网页旁边有一个栏,其中包含span块,其中包含博客帖子的标签。现在,它们被设置为display:inline table,在每一行上放置多个,然后作为溢出转到下一行 如果可能的话(JavaScript也可以,但是CSS是首选),我如何让这些跨距占据div内部的整个宽度,这样我就不会有右边的“粗糙边缘”?我想增加span块之间的边距,或者也可以增加span块的宽度 以下是我目前拥有的代码: 正文{ 背景色:#333; 颜色:#33333 2; } 旁白{ 背景色:白色; 宽度:300px;

我的网页旁边有一个
,其中包含
span
块,其中包含博客帖子的标签。现在,它们被设置为
display:inline table
,在每一行上放置多个,然后作为溢出转到下一行

如果可能的话(JavaScript也可以,但是CSS是首选),我如何让这些跨距占据
div
内部的整个宽度,这样我就不会有右边的“粗糙边缘”?我想增加
span
块之间的边距,或者也可以增加
span
块的宽度

以下是我目前拥有的代码:

正文{
背景色:#333;
颜色:#33333 2;
}
旁白{
背景色:白色;
宽度:300px;
高度:300px;
保证金:自动;
}
氢{
利润率:24px;
填充顶部:24px;
}
.标签包装{
填充:0px 24px;
}
跨度{
显示:内联表;
文本转换:大写;
背景色:#F77C2F;
利润:4倍2倍;
填充:8px;
}

标签
金融
如果
光伏
数据透视表
vba
测试
测试
测试

这就是你所说的吗?如果是这样,只需将跨度的显示更改为块,而不是内联块

正文{
背景色:#333;
颜色:#33333 2;
}
旁白{
背景色:白色;
宽度:300px;
高度:300px;
保证金:自动;
}
氢{
利润率:24px;
填充顶部:24px;
}
.标签包装{
填充:0px 24px;
}
跨度{
显示:块;
文本转换:大写;
背景色:#F77C2F;
利润:4倍2倍;
填充:8px;
}

标签
金融
如果
光伏
数据透视表
vba
测试
测试
测试

这就是你所说的吗?如果是这样,只需将跨度的显示更改为块,而不是内联块

正文{
背景色:#333;
颜色:#33333 2;
}
旁白{
背景色:白色;
宽度:300px;
高度:300px;
保证金:自动;
}
氢{
利润率:24px;
填充顶部:24px;
}
.标签包装{
填充:0px 24px;
}
跨度{
显示:块;
文本转换:大写;
背景色:#F77C2F;
利润:4倍2倍;
填充:8px;
}

标签
金融
如果
光伏
数据透视表
vba
测试
测试
测试

一点flexbox魔法就能完成任务:

正文{
背景色:#333;
颜色:#33333 2;
}
旁白{
背景色:白色;
宽度:300px;
高度:300px;
保证金:自动;
}
氢{
利润率:24px;
填充顶部:24px;
}
.标签包装{
填充:0px 24px;
显示器:flex;
柔性流:行换行;
对齐内容:拉伸;
}
跨度{
弹性:10自动;
文本转换:大写;
背景色:#F77C2F;
利润:4倍2倍;
填充:8px;
}

标签
金融
如果
光伏
数据透视表
vba
测试
测试
测试

一点flexbox魔法就能完成任务:

正文{
背景色:#333;
颜色:#33333 2;
}
旁白{
背景色:白色;
宽度:300px;
高度:300px;
保证金:自动;
}
氢{
利润率:24px;
填充顶部:24px;
}
.标签包装{
填充:0px 24px;
显示器:flex;
柔性流:行换行;
对齐内容:拉伸;
}
跨度{
弹性:10自动;
文本转换:大写;
背景色:#F77C2F;
利润:4倍2倍;
填充:8px;
}

标签
金融
如果
光伏
数据透视表
vba
测试
测试
测试

效果很好,谢谢!你能简单地解释一下或指向一个资源来解释什么是
flex:10 auto
吗?另外,在不支持CSS3的浏览器上,比如旧版本的IE上,
flex
是什么样子的?flexbox是,但95%的浏览器都支持它(并且在不断增长)。建议使用属性前缀(
-webkit
等)来增加支持。有没有办法告诉那些不支持flex的浏览器我的网页会是什么样子?据我回忆,在IE中,您可以使用开发人员工具更改兼容性模式以模拟旧版本。非常好,谢谢!你能简单地解释一下或指向一个资源来解释什么是
flex:10 auto
吗?另外,在不支持CSS3的浏览器上,比如旧版本的IE上,
flex
是什么样子的?flexbox是,但95%的浏览器都支持它(并且在不断增长)。建议使用属性前缀(
-webkit
等)来增加支持。有没有办法告诉那些不支持flex的浏览器我的网页会是什么样子?据我回忆,在IE中,您可以使用开发人员工具更改兼容性模式以模拟旧版本。