Javascript 对齐一行中的3列div无效

我在行div中嵌套了3列，使它们水平对齐，社交媒体图标将不属于该行。我把

宽度：100%

，

浮动：左

，并尝试了不同的方法使3列对齐-没有成功

下图是我成功所需的目标

HTML和CSS

p{
字体系列：“源Sans-Pro”，无衬线；
字体大小：14px；
}
h3{
字体系列：“源Sans-Pro”，无衬线；
字体大小：27px；
}
.盒子{
背景色：#F3；
颜色：#fff；
字体大小：150%；
宽度：100%；
}
.盒子，盒子{
背景色：#F3；
颜色：#444；
}
.占位符{
网格柱：第3列/第2跨；
网格行：第2行；
显示：网格；
}
.sm stw{
网格柱：1；
网格行：1；
宽度：573px；
}
.stw盒{
边框：实心1px#ff0000；
宽度：75%；
保证金：0自动；
填充：0自动；
}
垂直线{
宽度：1px；
背景色：#979797；
身高：100%；
浮动：左；
利润率：0 15px 0 15px；
}
.sm svrs{
网格柱：2；
网格行：1；
文本对齐：左对齐；
}
.sm标签stw{
网格柱：1/3；
网格行：2；
文本对齐：居中；
}

寻觅世界
（此处为简短内容）

我清理了一下您的css代码，并用flex替换了网格。还有很多我认为没用的东西，所以我把它们拿走了

正如@hungerstar在评论中所说，您可以为其中一个列设置边框，并添加一点填充以形成垂直线。 这样更好，因为它不会污染html

检查代码，告诉我你需要更多的解释

$（'removeGrayMargin'）。在（'click'，function（）上{
if（！$（this）.hasClass（'active'））{
$（this.text（‘放回灰色边距’）；
$（this.addClass（'active'）；
$（'.main container'）.addClass（'with-margin'）；
}否则{
$（此）.text（'删除灰色边距'）；
$（this.removeClass（'active'）；
$（'.main container'）.removeClass（'with-margin'）；
}
});
.main容器{
背景色：#F3；
颜色：#444；
字体大小：150%；
宽度：100%；
}
.盒子{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：实心1px#ff0000；
宽度：75%；
保证金：0自动；
填充：30px0；
}
.main-container.with-margin{
背景：透明；
}
.main-container.with-margin.box{
背景:#f3；
}
.col-1{
宽度：30%；
文本对齐：右对齐；
右边填充：20px；
}
.col-2{
宽度：70%；
左边框：1px实心#8c8c；
左侧填充：20px；
}
.col-2-title，
.col-2-p{
字体系列：“源Sans-Pro”，无衬线；
}
.col-2-p{
字体大小：14px；
边际上限：0；
}
.col-2-title{
字体大小：27px；
边缘顶部：5px；
边缘底部：20px；
}
.sm徽标+.sm徽标{
边缘顶部：8px；
}
img{
/*移除图像下方空白的技巧*/
垂直对齐：中间对齐；
}
钮扣{
边界半径：0；
背景：#262626；
颜色：白色；
边界：0；
填充：10px；
光标：指针；
}

寻觅世界
（此处内容较短）

奖金，因为我不知道你是想要准确的图像，还是想要灰色的边缘作为你的js小提琴。

删除灰色边距
我稍微清理一下css代码，然后用flex替换网格。还有很多我认为没用的东西，所以我把它们拿走了

正如@hungerstar在评论中所说，您可以为其中一个列设置边框，并添加一点填充以形成垂直线。
这样更好，因为它不会污染html

检查代码，告诉我你需要更多的解释


$（'removeGrayMargin'）。在（'click'，function（）上{
if（！$（this）.hasClass（'active'））{
$（this.text（‘放回灰色边距’）；
$（this.addClass（'active'）；
$（'.main container'）.addClass（'with-margin'）；
}否则{
$（此）.text（'删除灰色边距'）；
$（this.removeClass（'active'）；
$（'.main container'）.removeClass（'with-margin'）；
}
});
.main容器{
背景色：#F3；
颜色：#444；
字体大小：150%；
宽度：100%；
}
.盒子{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：实心1px#ff0000；
宽度：75%；
保证金：0自动；
填充：30px0；
}
.main-container.with-margin{
背景：透明；
}
.main-container.with-margin.box{
背景:#f3；
}
.col-1{
宽度：30%；
文本对齐：右对齐；
右边填充：20px；
}
.col-2{
宽度：70%；
左边框：1px实心#8c8c；
左侧填充：20px；
}
.col-2-title，
.col-2-p{
字体系列：“源Sans-Pro”，无衬线；
}
.col-2-p{
字体大小：14px；
边际上限：0；
}
.col-2-title{
字体大小：27px；
边缘顶部：5px；
边缘底部：20px；
}
.sm徽标+.sm徽标{
边缘顶部：8px；
}
img{
/*移除图像下方空白的技巧*/
垂直对齐：中间对齐；
}
钮扣{
边界半径：0；
背景：#262626；
颜色：白色；
边界：0；
填充：10px；
光标：指针；
}

寻觅世界
（此处内容较短）

奖金，因为我不知道你是想要准确的图像，还是想要灰色的边缘作为你的js小提琴。

删除灰色边距
如果您在此处使用任何css框架fwiw，您真的不需要为垂直线创建单独的列和元素。使用
border
或伪元素。不太熟悉网格列（不确定它在代码中的作用），但您可以简化标记并更多地使用flexbox，.Ah！
边框左侧颜色
！我从来没想过！如果不成功，我就尝试一下。我将以你为例。谢谢@hungerstar如果您在这里使用任何css框架fwiw，您真的不需要为您的垂直视图创建单独的列和元素