代码之家  ›  专栏  ›  技术社区  ›  flash

如何在html/css中水平滚动mobile/tablet视图中的内容?

  •  3
  • flash  · 技术社区  · 6 年前

    我有一个 fiddle 下面的截图是我复制的:

    enter image description here

    这个 CSS代码 我用于单个方形盒子项目的是:

    .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
    }
    


    问题陈述:

    现在在移动视图中,我想要截图中的项目 在移动/平板电脑视图中水平滚动 没有任何大小的变化。为了做到这一点,我使用了下面的css代码,但似乎不起作用。

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

    我想知道我应该在小提琴上做些什么改变,以便整个屏幕截图在移动/平板电脑视图中滚动。

    2 回复  |  直到 6 年前
        1
  •  1
  •   Gerardo BLANCO    6 年前

    主要的问题是这些物品和它们的父母有一个恐龙的宽度。项目占10%,父项占70%。

    我建议在媒体查询中使用下一种样式。您可以根据需要调整此规则以适应不同的断点。

    .product-contents .product{
      min-width: 25%;
      max-width: 25%; 
      margin: 0 2%;
      }
    

    我必须删除所有的js和一些html,才能使代码片段正常工作。你的代码达到了最大值。 希望这有帮助:>

    .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 &amp; 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 &amp; 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>
        2
  •  2
  •   Nikki Mather    6 年前

    你在正确的轨道上,但你不能使用 white-space: nowrap 在本例中,因为在使用 inline-block 创建水平滚动条的方法。虽然有一个flexbox属性 flex-wrap 当我们开始 nowrap 它也有类似的功能。

    请参阅更新的小提琴: https://jsfiddle.net/utmyu5r6/4/