如何让wrapper容器中的pre元素横向排列而非上下堆叠？

要让wrapper容器内的两个pre元素横向排列，直接使用float可能因pre的块级特性或容器宽度限制失效，推荐用Flexbox布局实现，简单高效：

修改后的CSS代码 #

html, body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper {
  padding-top: 30vh;
  padding-left: 25vw;
  /* 移除固定宽度，避免空间不足导致元素换行 */
  /* width: 271px; */
  margin: auto;
  /* 添加flex布局，使子元素横向排列 */
  display: flex;
  /* 可选：让两个pre紧密贴合，去除默认间距 */
  gap: 0;
}

/* 可选：移除pre默认外边距，消除不必要空隙 */
pre {
  margin: 0;
}

修改后的HTML代码 #

<div class="wrapper">
  <pre>
                             _________
                            /        |
                          /          |
      __________________/()__________|
    {}_________________|___________=_|
   { }      ______     |           . |
 _{ #}_    /##  ##\    |             |
{______)__|##    ##|___|_____________|
            ##__##  \
</pre>
  <pre class="seat">
_____________________________________________________
                                                    |
                                                    |
____________________________________________________|
__________________________________________________=_|
                                                  . |
                                                    |
____________________________________________________|
</pre>
</div>

关键说明 #

• display: flex 让wrapper的子元素（两个pre）默认沿横向主轴排列，直接解决上下堆叠问题
• 移除wrapper的固定宽度是因为原宽度271px远小于两个ASCII艺术的总宽度，会导致元素被迫换行
• 去掉pre的默认外边距可让两个ASCII部分无缝衔接，还原轿车的连续视觉效果

内容的提问来源于stack exchange，提问作者user21992523