如何使我的文本看起来并排且响应迅速？答案

【问题标题】：How can I make my texts appear to be side by side and responsive?如何使我的文本看起来并排且响应迅速？
【发布时间】：2020-10-14 02:56:33
【问题描述】：

我试图让我的代码并排排列，但似乎这对我不利。我无法将它们并排放置。这是我使用的代码：

 
    5
    Lorem Ipsum
    Dolor Sit Amet
  
  
    40
    Lorem Ipsum
    Dolor Sit Amet
  
  
    90
    Lorem Ipsum
    Dolor Sit Amet

当我现场试用时，它只出现在数字的底部，而不是文本的一侧。我尝试将其设置为 6 列布局，但它看起来比这个更糟糕，我还尝试添加一个浮动框，但效果不佳。

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

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

标签： html css inline

【解决方案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 元素上。

【讨论】：

你太棒了。非常感谢你，我会研究更多关于 flexbox 的知识，从没想过这可以解决它。谢谢！
@detr0it97 没问题。 Flexbox 很棒，css 网格更好:)