在CSS中将Div行转换为列

Question

好的，这是一个简单的问题，但是我已经花了一段时间了，我想知道是否有任何更简单的方法可以将该div从列转换为行，这是现在的格式。

问题

那么，如何将其分成几列？ 我免费在线获取了此模板，因此可能有些困惑，我尝试更改了填充大小，但是这样会破坏整个布局，

 .service-list { padding: 0 0 0 0; font-size: 14px; margin-bottom: 40px; } .service-list-col1 { float: left; width: 60px; } .service-list-col3 { float: left; width: 60px; } .service-list-col4 { float: left; width: 60px; } .service-list-col1 i { font-style: normal; font-size: 38px; display: block; color: #222; font-family: 'FontAwesome'; line-height: 38px; } .service-list-col2 { overflow: hidden; } .main-section.alabaster { background: #fafafa; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <section class="main-section" id="service"> <!--main-section-start--> <div class="container"> <h2>Services</h2> <h6>Your investment plus our market experience, endless possibilities.</h6> <div class="row"> <div class="col-lg-4 col-sm-6 wow fadeInLeft delay-05s"> <div class="service-list"> <div class="service-list-col1"><img src="img/iconn.png" alt="" width="39" height="37" /></div> <div class="service-list-col2"> <h3>Business development &amp; Project Syndication</h3> <p>Highest and Best Use Study for Properties<br> Syndication of Projects<br> Project Feasibility Studies<br> Jumpstarting a New Business<br> Brand Planning<br> Business Planning</p> </div> </div> <div class="service-list"> <div class="service-list-col3"><img src="img/iconn.png" alt="" width="39" height="37" /></div> <div class="service-list-col2"> <h3>investors support and management advisory</h3> <p>Business Opportunity Scanning<br> Investment Planning &amp; Implementation<br> Negotiations with Local Partners<br> Advisory on Business Entry into Philippines<br> Management to Reposition Existing Property.</p> </div> </div> <div class="service-list"> <div class="service-list-col4"><img src="img/iconn.png" alt="" width="39" height="37" /></div> <div class="service-list-col2"> <h3>strategies in marketing development, marketing, and sales.</h3> <p>Strategic Market Research and Planning<br> Positioning &amp; Branding Strategies<br> Market Development Strategies<br> Customized Strategic Marketing &amp; Sales<br> Interventions </p> </div> </div> </div> <figure class="col-lg-8 col-sm-6 text-right wow fadeInUp delay-02s"> </figure> </div> </div> </section> <!--main-section-end--> 

Answer 1

在这种情况下，包括HTML标记将有助于解决您的问题，但让我们看看。

首先，您确实有行，给定的图片有一列和三行，所以我假设您想将那些行变成列。

为此，请确保这些列的容器（嵌套所有.service-list元素的元素）的width: 100% 。

可能需要删除width: 60px .service-list-col*元素的width: 60px ，因为它小于其实际宽度，并且正在溢出，因此请将其删除或将其设置为更大的值。

如果仍然.service-list ，请尝试在您的.service-list元素中添加display: inline-block 。

希望这可以帮助。

UPDATE
嗯，现在有了HTML标记更有意义了。 忽略我上面的css建议，通过这种结构，您可以使用bootstrap的类来获取结果。

首先，您的service-lists包装程序必须能够覆盖整个页面，为此，您必须定义它占用12列（默认的bootstrap css将使用的屏幕宽度分成12列）。 为此，请删除这些类col-lg-4 col-sm-6并添加col-xs-12 。 这将告诉引导程序此元素覆盖所有屏幕的整个屏幕宽度。

其次，您需要service-list div覆盖屏幕的三分之一，因此为了获得良好的响应性，我将向它们添加类col-lg-4 col-md-6 col-xs-12 。 这将使它们在大屏幕上每行3个对齐（12/4 = 3），在中屏幕上每行2个对齐（12/6 = 2），在小型和超小屏幕上每行1个对齐（12/12 = 1）。

总结起来，在这里您可以看到一个有用的小提琴 ，我没有对CSS进行任何更改，我只是使用了bootstrap类。 注意，要实际查看结果，您必须拉长屏幕以使其在演示中实际对齐。