Javascript 如何在html/css的mobile/tablet视图中垂直堆叠项目？

我正在开发一个在桌面视图中运行得非常好的

桌面视图的工作方式是，单击任意两个产品项（默认情况下，其中一个保持选中状态），说明框将显示在底部，给出这些产品项的详细说明

我在移动视图中使用的CSS代码片段：

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 50.795%;
  margin: 0 2%;
    padding-top: 3.91%;
    padding-left: 3.91%;    padding-right: 3.91%;
  }
}

问题陈述：

在移动视图中，有一个小问题。问题是，我看到了两个产品项目的解释，而只有一个项目应该显示，而不改变它的外观，即项目应该保持堆积

我希望移动视图的工作方式与桌面视图完全相同，即当我们单击一个产品项目时，说明框应显示在底部，当我们单击另一个产品项目时，另一个说明框应显示在底部

---

我之所以使用display:inline block！重要信息，因为我希望项目在html/css的移动视图中垂直堆积。删除会使图像和文本压扁

您不清楚，请指定此移动视图是否与您希望在桌面上显示的相同？如果是这样的话，我建议您检查如何使用引导网格系统，您可以使用它们的CSS作为基准。

之所以会出现这种情况，是因为您设置了

显示：内联块！重要的

用于

@纯媒体屏幕中的
div.tv
和
div.cloudbasedtextipad
，以及（最大宽度：767px）

其中

覆盖
您的
显示：无css

解决方案1

您可以从媒体查询中删除这些类，因此您的
@media
如下

@media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label  {
  display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
   flex-direction: column;
 }
.tv img {
   max-width: 100%;
   height: auto;
  }
}

解决办法:2

您需要通过添加这些行来覆盖那些
css

div.franchisehubtv[style="display: none;"] {
    display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
    display: none !important;
}

更新小提琴

更新：对于小型设备，您可以使用
flex
设置布局

看看您当前的解决方案，第二个div有一个在767px以下调用的样式规则，这迫使它显示为内联块。通过添加！重要声明，则该声明将覆盖任何其他属性声明

如果删除此规则，将得到一个不完整的布局，但div会根据需要隐藏

至于布局，每个div中的内容将需要一些改进的flexbox规则，这些规则可以使用相同的断点在列或行方向之间切换：

flex-direction: column (for mobile)
flex-direction: row (for non-mobile)

您遇到的一个问题是，您在HTML中将显示属性设置为内联样式，因此必须使用
important
来覆盖。
第二个问题是jQuery上的
display:inline块
没有计数

你将不得不改变一些事情，我已经改变了小提琴来解释这些事情，只有当你点击按钮时才起作用，加载时你会看到这两个项目，有几种方法可以做这些事情，我只想做最小的改变来显示结果


在桌面上可能也不起作用，就像我说的，有几件事你必须改变。
只需删除显示：内联块！重要的；从@仅介质屏幕和（最大宽度：767px）。它能解决你的问题，但不能解决我的问题。再次检查我的问题陈述。我的问题陈述更好地解释了我的问题。您声明只应显示一个@user5447339是，只应显示一个，但不改变移动视图的外观。删除
显示：内联块！重要信息
更改外观。您可以在小提琴中更新它吗？这样，我就可以想象了。好吧，我想你误解了我的问题。你能读一下我的问题陈述吗？我使用
display:inline block的原因！重要信息
因为我希望项目在移动视图中垂直堆积（文本和移动）如果您面临文本和图像被压扁的问题，您可以使用
@media
设置这些元素，请检查此处是否有帮助，考虑接受这个答案：@ USSR5470799我可以回答这个问题的问题吗？我已经更新了，以显示需要的修改。即，将display:inline块规则替换为flex-direction:column规则。这将以基于列的格式显示每个div的内容。我添加了一个规则，让图像以100%的最大宽度显示，并将其高度设置为“自动”。这样可以防止图像溢出容器。