时间戳

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

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

问题描述

我正在尝试创建一个“股票滚动条”（选框样式）。我正在从 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>

标签： htmljquerycss

解决方案

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

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

推荐阅读