html - 如何使 html 页面上的分区响应？

Question

http://ebullience-tech.com/services.html网站链接

这是我的代码，有两个不同的部分，左边是细节，右边是细节索引，我希望这些在移动设备上打开时在直列中对齐，但它没有对齐，请帮忙

<section id="tabs" class="element">
                    <div class="container">
                        <div class="element-sec">
                                                        <h3>Domains we have <i>EXPERTISE</i></h3>

                            <div class="theme-tabs2">

软件开发

                                                                    </ul><!-- Selectors -->

                                <div id="myTabContent" class="tab-content aligned">

                                                                        <div class="tab-pane fade active in" id="software_development">
                                        <div class="col-md-3">
                                            <img alt="" src="images/resource/aligned2.jpg" />
                                        </div>
                                        <div class="col-md-9">
                                                                                        <h3> Software Development</h3>
                                                                                        <h2 style="font-size: large">Softwares plays the key role in maintaining records, data, accounts, ledger, stocks 
                                                                                               in a corporate or in an Industry with ease and accuracy. Holding and maintaining large data was a challenge for 
                                                                                            human from years but after the evolution of technology its not a big deal now very complex calculations are 
                                                                                            now solved in milli seconds. This evolution has increased the efficiency and accuracy of Industries and their 
                                                                                            work.
                                                                                           We Provides software development for all types of business need list of softwares we are providing is:</h2>  
                                            <ul class="theme-list">
                                                                                                   <li><i class=""><img></i>✓ Inventory and Stock Management</li>
                                                <li><i class="icon-check-sign"></i>✓ Account Manager</li>
                                                <li><i class="icon-check-sign"></i>✓ Billing Solution</li>
                                                <li><i class="icon-check-sign"></i>✓ Invoice and Purchase Order</li>
                                                                                                    <li><i class="icon-check-sign"></i>✓ Employee Management</li>
                                                                                                    <li><i class="icon-check-sign"></i>✓ Payroll Manager</li>
                                                                                                    <li><i class="icon-check-sign"></i>✓ Business Analytics</li>
                                                                                                    <li><i class="icon-check-sign"></i>✓ ERP</li>
                                            </ul>
                                        </div>
                                    </div>

                                                                        <div class="tab-pane fade in" id="web_development">
                                        <div class="col-md-4">
                                            <div class="progress">
                                              <div style="width: 85%;" class="progress-bar"><span>&lt;HTML /&gt;</span> <i>85%</i></div>
                                            </div>
                                            <div class="progress">
                                              <div style="width: 45%;" class="progress-bar"><span>&lt;?PHP</span> <i>45%</i></div>
                                            </div>
                                            <div class="progress">
                                              <div style="width: 90%;" class="progress-bar"><span>{CSS}</span> <i>90%</i></div>
                                            </div>
                                            <div class="progress">
                                              <div style="width: 70%;" class="progress-bar"><span>DESIGN</span> <i>70%</i></div>
                                            </div>
                                        </div><!-- Progress Bars Simple -->
                                        <div class="col-md-8">
                                        <h3> Website Development</h3>   
                                                                                        <p>Maintaining your presence globaly is a deed now a days in terms of business expansion in which a website gives you 
                                                                                                        the best result. Website can also be used as applications where you can maintain your data and make mathematical 
                                                                                                        operations to obtain results. Websites are mainly of two types <i>Static</i> and <i>Dynamic</i>. A static website is an informational website which 
                                                                                                        contains all the business and contact informations about the organizatoin or individual , no changes can be made in 
                                                                                                        run time on a static website. whereas a dynamic website contains more flexibility where you can intereact with database 
                                                                                                        and make changes to your profile and data on run time. Dynamic websites are widely used because they can 
                                                                                                        be used as a application which can be operated from anywhere in the world without any installation or specific 
                                                                                                        requirements. We are developing websites on all the major languages like .Net, Java, Php. and back end on SQL Server and MYSQL.</p>

                                        </div>
                                    </div>
                                                                        <div class="tab-pane fade in" id="mobile_app">
                                        <div class="col-md-3">
                                            <img alt="" src="images/resource/mobile.png" />
                                        </div>
                                        <div class="col-md-9">
                                                                                        <h3>Mobile Apps Development </h3>
                                                                                        <h2 style="font-size: large">Softwares plays the key role in maintaing records, data, accounts, ledger, stocks 
                                                                                            in a corporate or in an Industry with ease and accuracy. Holding and maintaining large data was a challenge for 
                                                                                            humen from years but after the evolution of technology its not a big deal now very complex calculations are 
                                                                                            now solved in mili seconds. This evolution has increased the efficiency and accuracy of Industries and their 
                                                                                            work.
                                                                                           We Provides software development for all types of business need list of softwares we are providing is:</h2>  
                                            <ul class="theme-list">
                                                                                                   <li><i class="icon-check-sign"></i>✓ Android Application</li>
                                                <li><i class="icon-check-sign"></i>✓ Windows Phone Application</li>
                                                <li><i class="icon-check-sign"></i>✓ IOS Application</li>
                                            </ul>
                                        </div>
                                    </div>
                                                                        <div class="tab-pane fade in" id="soft_web_testing">
                                        <div class="aligned">
                                        <div class="col-md-3">
                                                <img src="images/resource/testing.png" alt="" />
                                            </div>  
                                                                                        <div class="col-md-9">
                                                                                            <h3>Testing</h3>
                                                <h2>We evaluate an attribute or capability of a program or system and determine that it meets its required results.</h2>
                                                <p>Testing is an important part of a successful running product, Without testing the development is not completed. 
                                                                                                        We provides testing services to companies which are working in development field. <i></i></p>
                                            </div>

                                        </div>
                                    </div>
                                                                          <div class="tab-pane fade in" id="seo">
                                        <div class="aligned">
                                            <div class="col-md-3">
                                                <img src="images/resource/seo.jpg" alt="" />
                                            </div>
                                                                                        <div class="col-md-9">
                                                                                            <h3>Search Engine Optimization</h3>
                                                <h2>Help your site to get placed at good rank in a search engine.</h2>
                                                                                                    <p>Positioning <i>your website on top rank</i> in search engine(Google, Yahoo, Bing) search result is termed as SEO. 
                                                                                                        SEO is one of the most useful service for anyone who is running web based business, products and services are mostly searched on Search engines so if you 
                                                                                                        have a good rank their you will have get a better response among all the other rival sites.<i></i></p>
                                            </div>

                                        </div>
                                    </div>
                                                                        <div class="tab-pane fade in" id="graphic_design">
                                        <div class="aligned">
                                        <div class="col-md-3">
                                                <img src="images/resource/graphic.jpg" alt="" />
                                            </div>  
                                                                                        <div class="col-md-9">
                                                                                            <h3>Graphic Designing</h3>
                                                <h2>We Believe in developing Best Graphics according to our client's need.</h2>
                                                <p>Graphic design is the art of communication, stylizing, and problem-solving through the use of type, space and image. 
                                                                                                        Our graphic design include identity (logos and branding), publications (magazines, newspapers and books),
                                                                                                        print advertisements, posters, billboards, website graphics and elements, signs and product packaging.<i></i></p>
                                            </div>

                                        </div>
                                    </div>
                                                                        <div class="tab-pane fade in" id="marketing">
                                        <div class="aligned">
                                            <div class="col-md-3">
                                                <img src="images/resource/marketing.jpg" alt="" />
                                            </div>
                                                                                        <div class="col-md-9">
                                            <h3>Advertising & Marketing</h3>
                                                                                            <h2>Experience the Power of Advertising & Marketing</h2>
                                                <p>Social Meadia has a great reach to people, it connects people and group of people, and marketing you product on social media means 
                                                                                                        marketing directly to the end user. Most visited websites now a days are social media websites like facebook, twitter, google+ 
                                                                                                        they are connected to billions of people. We are providing social media marketing on Facebook and Google+.<i></i></p>
                                            </div>

                                        </div>
                                    </div>
                                 </div>
                                                                    <div class="list-group nav-tabs" id="myTab">

软件开发 Web开发 移动应用程序开发 软件/网络测试 平面设计 社交营销与广告

                        </div>
                            </div>

                    </div>
                </section>

Answer 1

这不是部分和分区对齐的问题，您的整个布局需要针对移动设备进行配置。您可以在 css3 中使用媒体标签:

@media (max-width: 1024px){}

平板布局

和:

@media (max-width: 770px){}

用于移动布局

在这些标签中，您可以使用相同的类和 ID 来覆盖您的样式，以适应手机和平板电脑的布局。我还建议您调整大小然后上传软件开发图像(因为它的原始大小“1200px*1179px”在移动设备上确实令人不安)并提供给您的容器:

width:100%;
max-width:1024px;

为了获得更好的结构化和响应式就绪布局。