Html div未正确对齐

如何正确地将3个div并排对齐

这就是我想要达到的目标

外观如下：

我尝试使用float属性使所有div具有相同的宽度，但没有帮助；我还将

内联块

与float属性一起使用，但这也没有帮助

.payment\u box.row.col-md-4{
位置：相对位置；
}
@介质（最小宽度：992px）{
.付款箱第列col-md-4{
浮动：左；
显示：内联块；
}
.col-md-4{
宽度：33.33333%；
}
}

---

您还应该为您的问题提供HTMl，以便人们知道您在尝试什么。我将使用
col 1
、
col 2
和
col 3
提供我的答案，这样您就可以了解它们的工作原理

最好为列创建一个初始包装器，然后创建一个DIV供它们使用

我在下面提供了一个使用三个列名的示例，这样您就可以修改百分比和宽度，以便在手机上显示不同的金额


.columnswrapper{
最小宽度：100%；
最大宽度：100%；
溢出：隐藏；
}
@仅介质屏幕和（最大宽度：500px）{
.专栏作家{
最小宽度：100%；
最大宽度：100%；
溢出：隐藏；
}
}
.栏目{
最小宽度：100%；
文本对齐：居中；
}
.col1{
最小宽度：33.3%；
浮动：左；
}
@仅介质屏幕和（最大宽度：500px）{
.col1{
最小宽度：100%；
浮动：左；
}
}
.col2{
最小宽度：33.3%；
浮动：左；
}
@仅介质屏幕和（最大宽度：500px）{
.col1{
最小宽度：100%；
浮动：左；
}
}
.col3{
最小宽度：33.3%；
浮动：左；
}
@仅介质屏幕和（最大宽度：500px）{
.col3{
最小宽度：100%；
浮动：左；
}
}

内容在这里

内容在这里

内容在这里

谢谢大家。经过多次试验，我终于解决了这个问题。在主分区（容器）中，我使用了
空白：normal

以下是容器的css

.payment_box{
    word-wrap: break-word; 
     white-space: normal;
    min-width: 100%;
    max-width: 100%;
    overflow: hidden;
}

将
.row
设置为
宽度：100%我们需要查看HTML。这可能是因为您使用的是
内联块
，并且项目之间有换行符，这会在项目之间留出空格。使用
float:left
，或
display:inline块-两者都不需要。更好的方法是使用flexbox。现在@TylerRoper修复了这些问题。提供的示例中有足够多的变体，可以使用一个或多个类，还可以设置不同的宽度和移动规则。谢谢你指出：）我会避免使用这个，而使用另一个答案中的CSS。请接受另一个答案：）@tryingtogethelp，我应用了提供的所有答案，但没有一个有效。