我怎样才能让我的文本看起来并排并且响应迅速？

Question

我试图并排编写我的代码，但似乎可能性不大。我无法将它们并排放置。这是我使用的代码：

  <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 列布局，但它看起来比这个更糟糕，我也尝试添加一个浮动框，但它也没有用。

这是我想要实现的目标：what I'm trying to achieve

我错过了什么吗？非常感谢。

Answer 1

借助 CSS flexbox、相对单位和 HTML 的更多结构，您可以获得想要的结果：

.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>

添加您认为合适的其余样式。但最好使用单独的 css 文件并将所有样式包含在其中，而不是将它们放在每个 HTML 元素上。

我怎样才能让我的文本看起来并排并且响应迅速？

How can I make my texts appear to be side by side and responsive?

html

css

inline