javascript - 如何在 html/css 中垂直堆叠移动/平板电脑 View 中的元素？

Question

我正在研究 fiddle这在桌面 View 中工作得很好。

桌面 View 的工作方式是点击任意 2 个产品元素(默认情况下，一个保持选中状态)，描述框会显示在底部，提供这些产品元素的详细说明。

我用于移动 View 的 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%;
  }
}

问题陈述:

在移动 View 中，有一个小问题。问题是，我看到了两种产品的说明，而应该只显示一种而不改变它的外观，即元素应该保持堆积。

我希望移动 View 以与桌面 View 完全相同的方式工作，即当我们单击一个产品元素时，描述框应显示在底部，当我们单击另一个产品元素时，另一个描述框应显示在底部.

我之所以使用 display:inline-block !important 是因为我希望这些元素在 html/css 的移动 View 中垂直堆积。删除它会使图像和文本被压扁。

Answer 1

发生这种情况是因为您在 中为 div.franchisehubtv 和 div.cloudbasedtextipad 设置了 display: inline-block !important; >@media only screen and (max-width: 767px) override 你的 display: none; css.

Solution No: 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;
  }
}

Solution No: 2

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

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

更新 fiddle here

Update: You can set your layout using flex for small devices