如何在html / css中水平滚动移动/平板电脑视图中的内容？ [英] How to horizontally scroll the contents in mobile/tablet view in html/css?
本文介绍了如何在html / css中水平滚动移动/平板电脑视图中的内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有
CSS代码我用于个人方形盒子项目的是：
.product-contents .product {
width：10 ％;
text-align：center;
height：150px;
padding-top：1％;
padding-left：1％;
填充权：1％;
border-style：solid;
border-width：3px;
border-color：rgb（145，147，150）;
背景颜色：白色;
border-radius：10px
}
问题陈述：
现在在移动视图中，我希望截图中的项目在移动/平板电脑视图中水平滚动没有任何项目大小的变化。为了做到这一点，我使用了下面的CSS代码，但它似乎并没有工作。
@media屏幕和（最大宽度：767px）
.product-all-contents {
overflow-x：auto;
white-space：nowrap;
}
我想知道我应该在小提琴上做些什么改变，在移动/平板电脑视图中滚动。
解决方案
主要问题是项目及其父母的动态宽度。项目占10％，其父母占70％。
我会建议您在媒体查询中使用下一个样式。您可以根据需要将此规则适用于不同的断点。
.product-contents .product {
最小宽度：25％;
最大宽度：25％;
保证金：0 2％;
}
我不得不删除所有JS和一些HTML以使代码片段工作。你的代码达到了SO的最大值。
希望这有助于：>
.product-all-contents {background-color：＃f0f0f0;宽度：70％; margin：auto;}。product-contents {display：flex; justify-content：space-between; align-items：center;填充：1rem; } .product-contents .product {width：10％; text-align：center; height：150px;填充顶部：1％;填充 - 左侧：1％;填充权：1％; border-style：solid; border-width：3px; border-color：rgb（145,147,150）;背景颜色：白色; border-radius：10px} .ipads {display：flex; justify-content：space-between; align-items：center; padding：1rem;}。tvs {display：flex; justify-content：space-between; align-items：center; padding：1rem;}。franchise-hub-text，.cloud-based-text，.business-analytics-text，.tech-support-text，.order-management-text，.employee-management-text，.white- label-text，.brand-label-text，.lead-tracking-text，.custom-invoicing-text，.goal-setting-text，.customization-tools-text，.royalty-calculator-text，.email-marketing -text {width：50％;} div.goal-setting，div.customization-tools，div.custom-invoicing，div.lead-tracking，div.email-marketing，div.royalty-calculator，div.brand-control ，div.franchisehubtv，div.cloudbasedtextipad，div.business-analytics，div.tech-support，div.employee-management，div.order-management，div.white-label {display：flex;余量：15％;保证金：15％; align-items：center; background-color：＃f0f0f0;填充：2％; margin-bottom：5％;}。product-quotes {display：block; padding：20px 11px;宽度：90％;颜色：＃3b3b3d;背景：白色; border-radius：2px;行高：1.625; font-family：'Roboto'; font-weight：normal;}。arrow-down {width：0; height：0; margin：auto; border-left：40px solid transparent; border-right：40px solid transparent; border-top：40px solid＃f0f0f0; } .white {display：none;} @ media only screen and（max-width：767px）{。product-all-contents {overflow-x：auto;}。product-contents .product {min-width：25％; max-width：25％; margin：0 2％;}}
<$ c $ lt;！doctype html>< html>< head>< meta charset =utf-8>< meta name =viewportcontent =width = device-width，initial- 1>< title>测试< / title>< link rel =stylesheethref =sample.css>< script src =https://cdnjs.cloudflare.com/ajax/libs/ jquery / 3.2.1 / jquery.min.js>< / script>< script type =text / javascriptsrc =script / myscript.js>< / script>< / head> < body>< div class =product-all-contents>< div class =product-contents>< div cla ss =productid =franchisehub> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.pngalt =width =59height =59class =aligncenter size-full wp-image-7920> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/franchise-hub-white.pngalt =width =59height =59 class =aligncenter size-full wp-image-7920> < p style =font-size：15px; font-family：'Roboto'; margin-left：7％; margin-right：7％; line-height：1.2; margin-top：20％; color：rgb （58,59,60）;>特许经营中心< / p> < / DIV> < div class =productid =cloudbasedmobilestyle =background-color：＃81bf44;> < img class =blackstyle =display：none; src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.pngalt =width =70height =50class =aligncenter size-full wp- image-8020/> < img class =whitestyle =display：inline-block; src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/cloud-based-mobile-white.pngalt =width =70height =50class =aligncenter size -full wp-image-8020/> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：27％; color：white;> Cloud Based&移动与LT; / p为H. < / DIV> < div class =productid =businessanalytics> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.pngalt =width =53height =53class =aligncenter size-full wp-image-7949/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/business-analytics-white.pngalt =width =53height =53 class =aligncenter size-full wp-image-7949/> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：22％; color：rgb（58，59，60）;> Business Analytics< / p为H. < / DIV> < div class =productid =techsupport> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.pngalt =width =54height =54class =aligncenter size-full wp-image-7953/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/tech-support-white.pngalt =width =54height =54 class =aligncenter size-full wp-image-7953/> < p style =font-size：15px; font-family：'Roboto'; margin-right：9％; line-height：1.2; margin-left：9％; margin-top：22％; color：rgb （58,59,60）;>技术支持< / p> < / DIV> < div class =productid =ordermanagement> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.pngalt =width =43height =52class =aligncenter size-full wp-image-7952/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/order-management-white.pngalt =width =43height =52 class =aligncenter size-full wp-image-7952/> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：23％; color：rgb（58,59,60）;> Order Management< / p为H. < / DIV> < div class =productid =employeemanagement> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management.pngalt =width =59height =59class =aligncenter size-full wp-image-7920> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/employee-management-white.pngalt =width =59height =59 class =aligncenter size-full wp-image-7920> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-left：5％; margin-top：27％; color：rgb（58,59,60） ;>员工管理< / p> < / DIV> < div class =productid =whitelabel> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label.pngalt =width =59height =59class =aligncenter size-full wp-image-7920> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/white-label-white.pngalt =width =59height =59 class =aligncenter size-full wp-image-7920> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-left：14％; margin-right：14％; margin-top：8％; color：rgb （58,59,60）;>白色标签< / p> < / div>< / div>< div class =product-contents> < div class =productid =brandcontrol> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control.pngalt =width =57height =57class =aligncenter size-full wp-image-7956/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/brand-control-white.pngalt =width =57height =57 class =aligncenter size-full wp-image-7956/> < p style =font-size：15px; font-family：'Roboto'; margin-left：8％; line-height：1.2; margin-right：8％; margin-top：20％; color：rgb （58,59,60）;>品牌控制< / p> < / DIV> < div class =productid =leadtracking> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking.pngalt =width =50height =50class =aligncenter size-full wp-image-7957/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/lead-tracking-white.pngalt =width =50height =50 class =aligncenter size-full wp-image-7957/> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-left：5％; margin-right：5％; margin-top：26％; color：rgb （58,59,60）;> Lead Tracking& amp; amp; amp; amp; amp; CRM和LT; / p为H. < / DIV> < div class =productid =custominvoicing> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing.pngalt =width =51height =50class =aligncenter size-full wp-image-7958/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/custom-invoicing-white.pngalt =width =51height =50 class =aligncenter size-full wp-image-7958/> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：24％; color：rgb（58,59,60）;> Custom Invoicing< / p为H. < / DIV> < div class =productid =goalsetting> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting.pngalt =width =50height =51class =aligncenter size-full wp-image-7959/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/goal-setting-white.pngalt =width =50height =51 class =aligncenter size-full wp-image-7959/> < p style =font-size：15px; font-family：'Roboto'; margin-right：13％; margin-left：13％; line-height：1.2; margin-top：24％; color：rgb （58,59,60）;>目标设置< / p> < / DIV> < div class =productid =customizationtools> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools.pngalt =width =54height =53class =aligncenter size-full wp-image-7960/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/customization-tools-white.pngalt =width =54height =53 class =aligncenter size-full wp-image-7960/> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-top：22％; color：rgb（58,59,60）;> Customization Tools< / p为H. < / DIV> < div class =productid =royaltycalculator> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator.pngalt =width =50height =51class =aligncenter size-full wp-image-7961/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/royalty-calculator-white.pngalt =width =50height =51 class =aligncenter size-full wp-image-7961/> < p style =font-size：15px; font-family：'Roboto'; line-height：1.2; margin-left：5％; margin-top：23％; color：rgb（58,59,60） ;>版税计算器< / p> < / DIV> < div class =productid =emailmarketing> < img class =blacksrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing.pngalt =width =51height =52class =aligncenter size-full wp-image-7962/> < img class =whitesrc =https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/email-marketing-white.pngalt =width =51height =52 class =aligncenter size-full wp-image-7962/> < p style =font-size：15px; font-family：'Roboto'; margin-left：5％; margin-right：5％; line-height：1.2; margin-top：21％; color：rgb （58,59,60）;>电子邮件营销< / p> < / div>< / div>< / div>< div class =arrow-down>< / div>< div class =franchisehubtvstyle =display：none;> < div class =franchise-hub-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/franchise-hub-green.pngalt =width =53height =53style =margin汉字：5％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Franchise Hub< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>特许经营管理中心可让您高效而透明地支持您的整个特许经营网络。品牌，发票，版税，产品和服务由企业组织，然后根据需要通过网络汇集。 < / p为H. < a href =https://thebettersoftwarecompany.com/franchise-management-hub/style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub-1.pngalt =width =450height =450class =aligncenter size-full wp-image-8081> < / DIV> < / div>< / div>< div class =cloudbasedtextipadstyle =display：flex;> < div class =cloud-based-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-based-mobile-green.pngalt =width =53height =53style = 边距：10％; > < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Cloud Based& amp; amp; amp; amp; amp;移动与LT; / H6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>我们基于云端并且首先是移动设备，这意味着无论您身在何处，您都可以访问所需的一切。该应用程序可让您在不损害任何功能或功能的情况下运行您的业务，因此员工可以从工作单位办理登机手续并保持最新状态。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Cloud-Based-Mobile.pngalt =width =450height =450class =aligncenter size-full wp-image-8081> < / DIV> < / div>< / div>< div class =business-analyticsstyle =display：none;> < div class =business-analytics-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics-green.pngalt =width =53height =53style =margin汉字：9％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Business Analytics< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>通过我们的业务分析和报告，您可以查看实时信息，包括从工作时间到开放订单和接受付款的所有信息。所有重要的日常数据，一目了然。 < / p为H. < a href =https://thebettersoftwarecompany.com/business-analytics/style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Business-Anylitics.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =tech-supportstyle =display：none;> < div class =tech-support-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support-green.pngalt =width =53height =53style =margin汉字：13％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;>技术支持< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>无论您，您的任何加盟商或其员工是否需要BPro软件的帮助，我们的支持团队都可以快速在线聊天，发送电子邮件或打电话。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tech-Support.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =order-managementstyle =display：none;> < div class =order-management-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management-green.pngalt =width =53height =53style =margin汉字：11％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;>订单管理< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>使用我们可定制且一致的订单管理系统来控制您的销售渠道。参考当前订单，创建新订单，复制现有订单等等。 < / p为H. < a href =https://thebettersoftwarecompany.com/order-management-software/style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Order-Managment.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =employee-managementstyle =display：none;> < div class =employee-management-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management-green.pngalt =width =53height =53style =margin汉字：11％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Employee Managment< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>简化您的人力资源并跟踪员工开始日期，生日和薪资等重要细节，同时能够跟踪每个人何时何地最有效。 < / p为H. < a href =https://thebettersoftwarecompany.com/employee-management/style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Employee-Managment.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =white-labelstyle =display：none;> < div class =white-label-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label-green.pngalt =width =53height =53style =margin汉字：10％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> White Label< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>当然，我们制作了BPro，但我们希望它确实是您的商业软件。你的模板，你的颜色，你的标志，你的语言。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =brand-controlstyle =display：none;> < div class =brand-control-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control-green.pngalt =width =53height =53style =margin汉字：9％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;>品牌控制< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>通过我们可定制的模板，徽标，语言和品牌颜色选项，在所有地点控制您的品牌，甚至在全球范围内。没有两个地点会再次生成不同的发票（除非您想要它们）。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =lead-trackingstyle =display：none;> < div class =lead-tracking-text> < img id =引导跟踪src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking-green.pngalt =width =53height = 53style =margin-bottom：9％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Lead Tracking& CRM和LT; / H6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>将您的销售和客户服务提升到一个与顾客关系经理一起的下一个级别，该经理专门设计了特许经营和多地点业务。具有自动化，过滤等功能。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Lead-Tracking-1.pngalt =width =450height =450class =aligncenter size-full wp-image-8081> < / DIV> < / div>< / div>< div class =custom-invoicingstyle =display：none;> < div class =custom-invoicing-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing-green.pngalt =width =53height =53style =margin汉字：13％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Custom Invoicing< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>我们的自定义帐单可让您创建直接链接到付款处理系统的一致，专业且个性化的发票。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Custom-Invoicing.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =goal-settingstyle =display：none;> < div class =goal-setting-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting-green.pngalt =width =53height =53style =margin汉字：13％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Goal Setting< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>目标很重要！确保他们通过我们的目标设定工具与您的特许经营网络进行沟通。不同地点或枢纽的目标不同？没问题。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Goal-Setting.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =customization-toolsstyle =display：none;> < div class =customization-tools-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools-green.pngalt =width =53height =53style =margin汉字：13％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Customization Tools< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>灵活定制您的软件，包括添加您的徽标，品牌颜色，语言等等。你的企业，你的软件。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Customization-Tools.pngalt =width =450height =450class =aligncenter size- full wp-image-8081> < / DIV> < / div>< / div>< div class =royalty-calculatorstyle =display：none;> < div class =royalty-calculator-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator-green.pngalt =width =53height =53style =margin汉字：4％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;>版税计算器< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p>就版税而言，不需要更复杂的计算。使用我们的版税计算器，您可以为每个位置设置唯一的版税规则，或者在整个版面上应用相同的模板。确保每个结算周期与同一个系统保持一致，并通过我们的版税报告确认数字。 < / p为H. < a href =https://thebettersoftwarecompany.com/franchise-royalty-calculator/style =float：right;>了解详情< / a> < / DIV> < / DIV> < div class =tvs> < div class =tv> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Royalties.pngalt =width =450height =450class =aligncenter size-full wp -Image-8081\" > < / DIV> < / div>< / div>< div class =email-marketingstyle =display：none;> < div class =email-marketing-text> < img src =https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing-green.pngalt =width =53height =53style =margin汉字：4％;> < h6 style =color：black; font-family：'Roboto'; font-weight：normal;> Email Marketing< / h6> < p style =font-family：'Roboto'; font-weight：normal; color：＃929397; margin-bottom：2.3％;>以您的方式工作的软件< / p> < div class =product-quotes> < p为H.通过特许经营或多地点业务，我们知道您并不总是希望所有客户都连接到同一个电子邮件营销活动，这就是为什么我们与Emma建立了整合。使用自动化广告系列和客户信息从BPro推送到Emma，让事情保持运行。 < / p为H. < a style =float：right;>了解详情< / a> < / DIV> < / div>< / body>< / html>
I have a fiddle which I have replicated by seeing the screenshot below:
The CSS code which I have used for the individual square box item is:
.product-contents .product {
width: 10%;
text-align: center;
height: 150px;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
background-color: white;
border-radius: 10px
}
Problem Statement:
Now in the mobile view, I want the items in the screenshot to horizontally scroll in the mobile/tablet view without any change in size of an item. In order to do that, I have used the following CSS code but it doesn't seem to work.
@media only screen and (max-width: 767px)
.product-all-contents {
overflow-x: auto;
white-space: nowrap;
}
I am wondering what changes I should make in the fiddle so that the whole screenshot scroll in the mobile/tablet view.
解决方案
The main problem is that the items and their parents have a dinamic width. Items being on 10% and its parent to 70%.
I would recommend using the next style inside your media query. You can adapt this rule to different breakpoints as you need.
.product-contents .product{
min-width: 25%;
max-width: 25%;
margin: 0 2%;
}
I had to remove all of the JS and some HTML to make the snippet work. Your code hit the max of SO. Hope this helps :>
.product-all-contents{
background-color: #f0f0f0;
width: 70%;
margin: auto;
}
.product-contents {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.product-contents .product {
width: 10%;
text-align: center;
height: 150px;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
background-color: white;
border-radius: 10px
}
.ipads {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.franchise-hub-text, .cloud-based-text, .business-analytics-text, .tech-support-text, .order-management-text, .employee-management-text, .white-label-text,
.brand-label-text, .lead-tracking-text, .custom-invoicing-text, .goal-setting-text, .customization-tools-text, .royalty-calculator-text, .email-marketing-text
{
width: 50%;
}
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control,
div.franchisehubtv, div.cloudbasedtextipad, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
display: flex;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}
.product-quotes
{
display: block;
padding: 20px 11px;
width: 90%;
color:#3b3b3d;
background: white;
border-radius: 2px;
line-height: 1.625;
font-family: 'Roboto';
font-weight: normal;"
}
.arrow-down {
width: 0;
height: 0;
margin: auto;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #f0f0f0;
}
.white
{
display: none;
}
@media only screen and (max-width: 767px)
{
.product-all-contents
{
overflow-x: auto;
}
.product-contents .product{
min-width: 25%;
max-width: 25%;
margin: 0 2%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing</title>
<link rel="stylesheet" href="sample.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script/myscript.js"></script>
</head>
<body>
<div class="product-all-contents">
<div class="product-contents">
<div class="product" id="franchisehub">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/franchise-hub-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<p style=" font-size: 15px; font-family: 'Roboto'; margin-left: 7%; margin-right: 7%; line-height: 1.2; margin-top: 20%;
color: rgb(58, 59, 60);">Franchise Hub</p>
</div>
<div class="product" id="cloudbasedmobile" style="background-color:#81bf44;">
<img class="black" style="display:none;" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-grey.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8020" />
<img class="white" style="display:inline-block;" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/cloud-based-mobile-white.png" alt="" width="70" height="50" class="aligncenter size-full wp-image-8020" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 27%;
color:white;">Cloud Based & Mobile</p>
</div>
<div class="product" id="businessanalytics">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/business-analytics-white.png" alt="" width="53" height="53" class="aligncenter size-full wp-image-7949" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 22%;
color: rgb(58, 59, 60);">Business Analytics</p>
</div>
<div class="product" id="techsupport">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/tech-support-white.png" alt="" width="54" height="54" class="aligncenter size-full wp-image-7953" />
<p style=" font-size: 15px;
font-family: 'Roboto';
margin-right: 9%;
line-height: 1.2;
margin-left: 9%; margin-top: 22%;
color: rgb(58, 59, 60);">Tech Support</p>
</div>
<div class="product" id="ordermanagement">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/order-management-white.png" alt="" width="43" height="52" class="aligncenter size-full wp-image-7952" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 23%;
color: rgb(58, 59, 60);">Order Management</p>
</div>
<div class="product" id="employeemanagement">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/employee-management-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 27%;
color: rgb(58, 59, 60);">Employee Management</p>
</div>
<div class="product" id="whitelabel">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/white-label-white.png" alt="" width="59" height="59" class="aligncenter size-full wp-image-7920">
<p style="
font-size: 15px;
font-family: 'Roboto';
line-height:1.2;
margin-left: 14%;
margin-right: 14%; margin-top: 8%;
color: rgb(58, 59, 60);
">White Label</p>
</div>
</div>
<div class="product-contents">
<div class="product" id="brandcontrol">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/brand-control-white.png" alt="" width="57" height="57" class="aligncenter size-full wp-image-7956" />
<p style="
font-size: 15px;
font-family: 'Roboto';
margin-left: 8%;
line-height:1.2;
margin-right: 8%; margin-top: 20%;
color: rgb(58, 59, 60);
">Brand Control</p>
</div>
<div class="product" id="leadtracking">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/lead-tracking-white.png" alt="" width="50" height="50" class="aligncenter size-full wp-image-7957" />
<p style="
font-size: 15px;
font-family: 'Roboto';
line-height:1.2;
margin-left: 5%;
margin-right: 5%; margin-top: 26%;
color: rgb(58, 59, 60);
">Lead Tracking & CRM</p>
</div>
<div class="product" id="custominvoicing">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/custom-invoicing-white.png" alt="" width="51" height="50" class="aligncenter size-full wp-image-7958" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 24%;
color: rgb(58, 59, 60);">Custom Invoicing</p>
</div>
<div class="product" id="goalsetting">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/goal-setting-white.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7959" />
<p style="font-size: 15px;
font-family: 'Roboto';
margin-right: 13%;
margin-left: 13%;
line-height: 1.2; margin-top: 24%;
color: rgb(58, 59, 60);">Goal Setting</p>
</div>
<div class="product" id="customizationtools">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/customization-tools-white.png" alt="" width="54" height="53" class="aligncenter size-full wp-image-7960" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-top: 22%;
color: rgb(58, 59, 60);">Customization Tools</p>
</div>
<div class="product" id="royaltycalculator">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/royalty-calculator-white.png" alt="" width="50" height="51" class="aligncenter size-full wp-image-7961" />
<p style=" font-size: 15px;
font-family: 'Roboto';line-height:1.2; margin-left: 5%; margin-top: 23%;
color: rgb(58, 59, 60);">Royalty Calculator</p>
</div>
<div class="product" id="emailmarketing">
<img class="black" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" />
<img class="white" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/06/email-marketing-white.png" alt="" width="51" height="52" class="aligncenter size-full wp-image-7962" />
<p style="
font-size: 15px;
font-family: 'Roboto';
margin-left: 5%;
margin-right: 5%;
line-height:1.2; margin-top: 21%;
color: rgb(58, 59, 60);
">Email Marketing</p>
</div>
</div>
</div>
<div class="arrow-down"></div>
<div class="franchisehubtv" style="display:none;">
<div class="franchise-hub-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/franchise-hub-green.png" alt="" width="53" height="53" style="margin-bottom:5%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Franchise Hub</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Franchise management hubs allow you to support your entire franchise network efficiently and transparently. Branding, invoicing, royalties, products and services, are organized by corporate, and then funneled down through the network as desired.
</p>
<a href="https://thebettersoftwarecompany.com/franchise-management-hub/" style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Franchise-Hub-1.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="cloudbasedtextipad" style="display:flex;">
<div class="cloud-based-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/cloud-based-mobile-green.png" alt="" width="53" height="53" style="margin-bottom:10%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Cloud Based & Mobile</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>We’re cloud based and mobile first, which means you can access everything you need, no matter where you are. The app lets you run your business without compromising any features or power, so employees are able to check in from worksites and stay up to date.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Cloud-Based-Mobile.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="business-analytics" style="display:none;">
<div class="business-analytics-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/business-analytics-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Business Analytics</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Our business analytics and reports let you see real-time information on everything from hours worked to open orders and payments accepted. All your important daily figures, at a glance.
</p>
<a href="https://thebettersoftwarecompany.com/business-analytics/" style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Business-Anylitics.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="tech-support" style="display:none;">
<div class="tech-support-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/tech-support-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Tech Support</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Whether you, any of your franchisees, or their staff ever need help with BPro software, our support team is a quick online chat, email, or phone call away.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tech-Support.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="order-management" style="display:none;">
<div class="order-management-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/order-management-green.png" alt="" width="53" height="53" style="margin-bottom:11%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Order Management</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Control your sales pipeline with our customizable and consistent order management system. Reference current orders, create new ones, duplicate existing orders and more.
</p>
<a href="https://thebettersoftwarecompany.com/order-management-software/" style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Order-Managment.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="employee-management" style="display:none;">
<div class="employee-management-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/employee-management-green.png" alt="" width="53" height="53" style="margin-bottom:11%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Employee Managment</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Simplify your human resources and keep track of important details like employee start dates, birthdays, and payroll, all while being able to keep track of where and when everyone is being most effective.
</p>
<a href= "https://thebettersoftwarecompany.com/employee-management/" style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Employee-Managment.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="white-label" style="display:none;">
<div class="white-label-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/white-label-green.png" alt="" width="53" height="53" style="margin-bottom:10%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">White Label</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Sure, we made BPro, but we want it to really be your business software. Your templates, your colours, your logo, your language.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.png" alt="" width="450" height="450"class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="brand-control" style="display:none;">
<div class="brand-control-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/brand-control-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Brand Control</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p >Control your brand across all locations, even internationally with our customizable templates, logo, language and branded colour options. No two locations will ever generate different invoices ever again (unless you want them to).
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Brand-Control.png" alt=""width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="lead-tracking" style="display:none;">
<div class="lead-tracking-text">
<img id="lead-tracking" src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/lead-tracking-green.png" alt="" width="53" height="53" style="margin-bottom:9%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Lead Tracking & CRM</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Take your sales and customer service to the next level with a customer relationship manager designed specifically with franchises and multi-location businesses in mind. Featuring automation, filtering and more.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Lead-Tracking-1.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="custom-invoicing" style="display:none;">
<div class="custom-invoicing-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/custom-invoicing-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Custom Invoicing</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Our custom invoicing lets you create consistent, professional and personalized invoices that link directly to a payment processing system.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Custom-Invoicing.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="goal-setting" style="display:none;">
<div class="goal-setting-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/goal-setting-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Goal Setting</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Goals are important! Make sure they’re communicated throughout your franchise network with our goal setting tool. Different goals for different locations or hubs? No problem.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Goal-Setting.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="customization-tools" style="display:none;">
<div class="customization-tools-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/customization-tools-green.png" alt="" width="53" height="53" style="margin-bottom:13%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Customization Tools</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>Flexibility to customize your software including the addition of your logo, brand colours, language, and so much more. Your business, your software.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Customization-Tools.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="royalty-calculator" style="display:none;">
<div class="royalty-calculator-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/royalty-calculator-green.png" alt="" width="53" height="53" style="margin-bottom:4%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Royalty Calculator</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p>No more complicated calculations when it comes to royalties. With our royalty calculator, you can set unique royalty rules for each location, or apply the same template across the board. Ensure consistency every billing period with the same system, and confirm numbers with our royalty reports.
</p>
<a href="https://thebettersoftwarecompany.com/franchise-royalty-calculator/" style="float:right;">Learn More</a>
</div>
</div>
<div class="tvs">
<div class="tv">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Royalties.png" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
</div>
</div>
</div>
<div class="email-marketing" style="display:none;">
<div class="email-marketing-text">
<img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/email-marketing-green.png" alt="" width="53" height="53" style="margin-bottom:4%;">
<h6 style="color:black;font-family:'Roboto';font-weight:normal;">Email Marketing</h6>
<p style="font-family: 'Roboto'; font-weight: normal;color:#929397; margin-bottom:2.3%;">Software that works the way you do</p>
<div class="product-quotes">
<p> With a franchise or multi-location business, we know you don’t always want all customers to be connected to the same email campaign, that’s why we established an integration with Emma. Keep things running with automated campaigns and customer info pushes from BPro to Emma.
</p>
<a style="float:right;">Learn More</a>
</div>
</div>
</div>
</body>
</html>
这篇关于如何在html / css中水平滚动移动/平板电脑视图中的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
