如何在 html/css 中垂直堆积移动/平板电脑视图中的项目？答案

【问题标题】：How to vertically pile items in mobile/tablet view in html/css?如何在 html/css 中垂直堆积移动/平板电脑视图中的项目？
【发布时间】：2018-06-04 15:56:40
【问题描述】：

我正在开发fiddle，它在桌面视图中运行良好。

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

我用于移动视图的 CSS 代码的 sn-ps：

@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 !important 是因为我希望项目在 html/css 的移动视图中垂直堆积。删除它会使图像和文本被挤压。

【问题讨论】：

只需从 @media only 屏幕和 (max-width: 767px) 中删除 display: inline-block !important;。它会解决你的问题
它不能解决我的问题。再次检查我的问题陈述。
我的问题陈述更好地解释了我的问题。
你说应该只显示一个@user5447339
是的，应该只显示一个，但不改变移动视图的外观。删除 display: inline-block !important 会改变外观。

标签： javascript jquery html css media-queries

【解决方案1】：

发生这种情况是因为您在@media only screen and (max-width: 767px) 中为div.franchisehubtv 和div.cloudbasedtextipad 设置了display: inline-block !important;，而override 您的display: none; 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;
}

更新小提琴here

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

【讨论】：

你能在小提琴中更新它吗？这样，我就能形象化了。
好的，我想你误解了我的问题。你能看一下我的问题陈述吗？
我之所以使用display:inline-block !important是因为我希望项目在移动视图中垂直堆积（文本和移动）
如果您遇到文字和图像压扁的问题，您可以使用@media 设置这些元素，请在此处查看jsfiddle.net/zaefnson/3
如果这对您有帮助，请考虑接受答案 :) @user5447339

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

如果您删除此规则，您会得到一个损坏的布局，但 div 会根据需要隐藏。

在布局方面，每个 div 内的内容都需要一些细化的 flexbox 规则，可以使用相同的断点在列方向或行方向之间切换：

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

【讨论】：

你能对我的问题进行问题陈述吗？
我已更新 fiddle 以显示所需的修改。即，将 display: inline-block 规则替换为 flex-direction: column 规则。这将以基于列的格式显示每个 div 的内容。我添加了一条规则，让图像以 100% 的最大宽度显示，并将它们的高度设置为自动。这会阻止图像溢出容器。

【解决方案4】：

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

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

https://jsfiddle.net/zaefnson/2/

而且在桌面上可能也不行，就像我说的那样，有几件事你将不得不改变。

【讨论】：