html - 在 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%。

可能你必须从你的 .service-list-col* 元素中删除 width: 60px 因为它小于它们的实际宽度并且它会溢出，所以将其删除或将其设置为更大的值。

如果这仍然不起作用，请尝试将 display: inline-block 添加到您的 .service-list 元素中。

希望这对您有所帮助。

更新
啊，现在有了 HTML 标记就更有意义了。忽略我上面的 css 建议，使用这种结构，您可以使用 Bootstrap 的类来获得结果。

首先，您的 service-lists 包装器需要能够覆盖整个页面，为此，您必须定义它占用 12 列(默认 Bootstrap css 将使用的屏幕宽度分为 12 列)。为此，删除这些类 col-lg-4 col-sm-6 并添加 col-xs-12。这将告诉 Bootstrap 该元素覆盖所有屏幕的整个屏幕宽度。

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

总而言之，在这里你可以看到一个有效的 fiddle ，我没有对您的 CSS 做任何更改，我只是使用了 Bootstrap 类。请注意，要实际看到结果，您必须拉伸(stretch)屏幕才能真正看到它们在演示中排成一行。