我试图使我的代码并排，但似乎这对我不是有利的几率。我很难让它们并排。下面是我使用的代码：
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >5</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >40</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
<div class="column" style="box-sizing:border-box;text-align:center;float:left;width:33.33%;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >90</h2>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
</div>
当我尝试它的现场，它只出现在数字的底部，而不是在文字的侧面。我尝试使它作为一个6列布局，但它看起来比这一个可怕，我也尝试添加一个浮动框，但它没有工作的一样。
这就是我想要实现的：我想要实现的
我错过什么了吗？提前多谢了。
在CSSflexbox的帮助下，相关单元和HTML的一些结构，您可以得到您想要的结果：
null
.columns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100vw;
margin: auto;
}
.column {
display: flex;
flex-direction: row;
align-items: center;
}
.big-num {
font-size: 10vw;
}
.text-container {
line-height: 0;
margin-left: 2.5vw;
}
.text {
font-size: 1.75vw;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns">
<div class="column" >
<h2 class="big-num">5</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
<div class="column">
<h2 class="big-num">40</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
<div class="column">
<h2 class="big-num">90</h2>
<div class="text-container">
<p class="text">Lorem Ipsum</p>
<p class="text">Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</body>
</html>
在这种情况下，您必须使用Flex Box。
<div style="display:flex;justify-content: space-between;align-items: center;">
<div class="column" style="display:flex;box-sizing:border-box;text-align:center; padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >5</h2>
<div>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
</div>
<div class="column" style="display:flex;box-sizing:border-box;text-align:center; padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >40</h2>
<div>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
</div>
<div class="column" style="display:flex;box-sizing:border-box;text-align:center; padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;height:300px;" >
<h2 style="box-sizing:border-box;font-size:50px;color:#fa4616;" >90</h2>
<div>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Lorem Ipsum</p>
<p style="box-sizing:border-box;font-size:20px;color:#fa4616;" >Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
我建议你接受第二个答案。
