Html 如何修复没有填充的中间列？

我正在做一个模仿苦力报告网站的实践

在编写代码时，我注意到中间列的填充似乎不起作用。

/分隔线旁边没有空格，这会影响整体外观

a{
颜色：黑色；
}
.集装箱{
字号：12.5px；
}
.顶级ul{
保证金：0；
利润上限：70像素；
填充：0；
字体系列：信使，无衬线；
字体大小：粗体；
列表样式：无；
文字装饰：下划线；
}
排名第一的李：第n个孩子（3）a{
颜色：红色；
文字装饰：下划线；
文字装饰颜色：红色；
}
李：第n个孩子（10）a{
颜色：红色；
文字装饰：下划线；
文字装饰颜色：红色；
}
.主图像{
边缘顶部：30px；
文本对齐：居中；
}
.中间文本{
字体系列：ARIAL、VERDANA、HELVETICA；
字体大小：粗体；
文本对齐：居中；
文字装饰：下划线；
}
.中文本p{
边际：0px；
填充：0px；
字体大小：47px；
}
.中间文本img{
边缘底部：45像素；
}
.左栏{
浮动：左；
宽度：33%；
右侧填充：5px；
字体系列：信使，无衬线；
文字装饰：下划线；
字体大小：粗体；
右边框：1px实心#000；
高度：2460px；
}
.左栏img{
宽度：200px；
}
.中柱{
文本对齐：居中；
宽度：33%；
左侧填充：5px；
右侧填充：5px；
字体系列：信使，无衬线；
文字装饰：下划线；
字体大小：粗体；
}
.中柱img{
宽度：200px；
}
.右栏{
浮动：对；
宽度：33%；
左侧填充：5px；
字体系列：信使，无衬线；
文字装饰：下划线；
字体大小：粗体；
左边框：1px实心#000；
高度：2460px；
}
.右栏img{
宽度：200px；
}

看起来上面的HTML/CSS正在使用CSS属性来实现三列布局

这是一种既旧又低效的方法（对于柱，首选Flexbox，对于更复杂的布局，首选Grid）

使用

float

的注意事项是

中间列

不应设置

宽度

，而应设置与左右列大小匹配的

左边距

和

右边距

。举个例子

。中间列{
/*宽度：33%；不要应用宽度，它不适合*/
左边距：33%；/*跳过左栏*/
右边距：33%；/*跳过右栏*/
}

上面的样式应该可以解决这个问题。但我建议你看看

可以处理这个用例和更多。目前的浏览器很支持它

使用Flexbox的3列布局：

.flex行{
显示器：flex；
弯曲方向：行；
}
.左栏{
宽度：33%；
}
.右栏{
宽度：33%；
}
.中柱{
宽度：33%；
}

左列
中柱
右栏

文本对齐处的语法错误：中心宽度：33%。缺少一个分号。嗯。。这似乎更能打破它。现在，中间的文本位于左列下方，它居中而不是居中，但文本从左侧开始（如果有意义的话）。我该怎么纠正呢？请发一封邮件。CSS总是需要HTML。编辑原始帖子以添加导致它的HTML。为什么首先使用如此古老的设计技术而不是CSS网格？更简单、更干净、更现代的解决方案。每个浏览器都支持CSS-Grid，并采用了古老的Internet explorer。实际上，对于像这里这样的3列布局，它甚至会更短。CSS只需添加：

body{display:grid；grid-template-columns:repeat（3，1fr）；}

然后就不需要定义child的宽度了。或者，对于您的samle exchange

body

和

.flex row

来说，这非常有效，谢谢！更新了关于网格支持的说明。若要缩短css代码，您可以使用：

.flex row{display:flex；flex direction:row；}.flex row div{width:33%；}