在之前的 div 的右侧动态添加 X 个 div 并水平（而不是垂直）展开页面答案

【问题标题】：Dynamically add an X number of divs to the right of prior divs and expand page horizontally (not vertically)在之前的 div 的右侧动态添加 X 个 div 并水平（而不是垂直）展开页面
【发布时间】：2020-11-23 21:24:57
【问题描述】：

我正在尝试创建一个“股票滚动条”（选框样式）。我从 API 获取数据并希望在全屏视图中显示徽标以及数据（价格和百分比变化），而徽标占据页面的 100% 高度，价格和百分比变化随之而来向右。

用户可以选择要获取数据的股票和数量。每个后续库存（徽标/数据）都应遵循此模式并附加到前一个/其他的右侧。

有一个容器 #anchorDiv 包含所有具有这些 css 属性的数据：

height:100vh;
white-space: nowrap;

每个股票（徽标/数据）都放置在具有以下属性的类类型 .stockContainer 的容器中：

display:inline-block;
position: relative;
overflow-x: auto;
overflow-y: hidden;

容器内的图像 (.stockContainer img) 具有以下属性：

height: 96vh;
margin-top: 2vh;
margin-bottom: 2vh;

文本具有以下属性：

float: right;
margin-right:5px;
color:black;
font-size:170px;

这是正文中的 HTML 代码：

<div id="anchorDiv">
        <div class="stockContainer">
            <img src="logos\aapl.png">
            <p class="percentChange">+20%</p>
            <p class="currentPrice">$20</p>
            <p class="stockName">AAPL</p>
        </div>
        <div class="stockContainer">
            <img src="logos\MSFT.png">
            <p class="percentChange">+20%</p>
            <p class="currentPrice">$20</p>
            <p class="stockName">MSFT</p>
        </div>
        <!-- Dynamically add more stockContainer divs here.. -->
    </div>

因此，尽管我启用了white-space: nowrap，但文本仍然会缩到图像下方的底部。如果我显示垂直溢出，我可以看到文本，如果我隐藏溢出我不能。

基本上，我想动态地继续在先前内容的右侧添加内容（水平扩展），但它会一直在下面或奇怪的地方添加它。

为了清楚起见，我附上了图片。这张图片代表了我想要实现的目标：

这张图片代表了我目前得到的结果：

#anchorDiv {
  display:inline-block;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.stockContainer img {
  height: 96vh;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.stockContainer p {
  float: right;
  margin-right:5px;
  color:black;
  font-size:170px;
}

<div id="anchorDiv">
        <div class="stockContainer">
            <img src="logos\aapl.png">
            <p class="percentChange">+20%</p>
            <p class="currentPrice">$20</p>
            <p class="stockName">AAPL</p>
        </div>
        <div class="stockContainer">
            <img src="logos\MSFT.png">
            <p class="percentChange">+20%</p>
            <p class="currentPrice">$20</p>
            <p class="stockName">MSFT</p>
        </div>
        <!-- Dynamically add more stockContainer divs here.. -->
</div>

【问题讨论】：

请提供您编写的代码：HTML 和 CSS（也包括 JS），或者您可以创建一个模拟场景的最小可重现示例。尝试为每个代码段创建一个代码块，而不是像以前那样创建内联代码块。
使示例可重现，否则将很难帮助您
我尝试添加更多代码和照片来充分解释问题。你能再看看吗？
我会给你一个可重复的例子

标签： html jquery css

【解决方案1】：

如果我理解正确，您想将 div 添加到容器中，并希望它们保持水平轴。你可以使用display:flex和flex-wrap:nowrap

.container {
    display:flex;
    flex-flow:row nowrap;
}

【讨论】：

【解决方案2】：

你不能用

.containter{
  display:grid;
  grid-template-columns: 100px 1fr 1fr;
}

因此，通过将容器内的内容格式化为基于列的内容，您可以为每个股票的内容创建边界。还是我误解了这个问题？

【讨论】：

【解决方案3】：

div 元素默认有display: block; 所以你可以通过将它添加到你的样式来解决这个问题

.stockContainer {
  display: inline-block;
}

【讨论】：