html - 用背景颜色分隔行中的元素

Question

我需要将三个 div 分开，保持在同一行，但彼此的背景颜色不允许这样做。问题是，当我设置额外的边距或填充时，div 会包裹起来，而不是保持水平对齐。

#service_container {
  text-align: center;
}

.servicon {
  font-size: 54px;
}

.service_page_tile {
  background-color: rgba(161, 204, 239, 0.5);
}

<div id="service_container" class="container-fluid">
  <div id="s_idea" class="container-fluid">
    <h2>Idea</h2>
    <div class="row">
      <div class="service_page_tile col-lg-4 col-md-6 col-sm-12">
        <i class="servicon far fa-lightbulb"></i><br> Do you have an idea about a website you want to realize? Blog, Company Website, e-shop, V-log channel, web-app or just your personal page, I will pay special attention to the customer's output to achieve.
      </div>
      <div class="service_page_tile col-lg-4 col-md-6 col-sm-12">
        <i class="servicon fas fa-lightbulb"></i><br> Do you still need to find out what's your deal? Let's check templates and discover what's the best formula chosen by the most succesfull people or business.
      </div>
      <div class="service_page_tile col-lg-4 col-md-12 col-sm-12">
        <i class="servicon fas fa-video"></i><br> What about a video? A resumé, a clip for a presentation or simply your last travel on the other side of the world. there's nothing more catchy to convey emotions or ideas!
      </div>
    </div>
  </div>

http://jsfiddle.net/Z7mFr/182/

Answer 1

当您向固定宽度元素添加边距时，计算出的宽度会将边距值添加到固定宽度，这将导致其位于下方，这是因为同一行中没有更多空间

解决方案:

将 div 的内容包裹在另一个 div 中，并对内部 div 应用边距，或者仅向外部 div 添加填充，因为 box-sizing 属性已包含在 bootstrap 中

查看解决方案:

#service_container {
  text-align: center;
}

.servicon {
  font-size: 54px;
}

.service_page_tile {
  background-color: rgba(161, 204, 239, 0.5);
  margin:5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="service_container" class="container-fluid">
  <div id="s_idea" class="container-fluid">
    <h2>Idea</h2>
    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="service_page_tile ">
          <i class="servicon far fa-lightbulb"></i><br> Do you have an idea about a website you want to realize? Blog, Company Website, e-shop, V-log channel, web-app or just your personal page, I will pay special attention to the customer's output to
          achieve.
        </div>
      </div>
      <div class=" col-lg-4 col-md-6 col-sm-12">
        <div class="service_page_tile">
          <i class="servicon fas fa-lightbulb"></i><br> Do you still need to find out what's your deal? Let's check templates and discover what's the best formula chosen by the most succesfull people or business.
        </div>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <div class="service_page_tile ">
          <i class="servicon fas fa-video"></i><br> What about a video? A resumé, a clip for a presentation or simply your last travel on the other side of the world. there's nothing more catchy to convey emotions or ideas!
        </div>
      </div>
    </div>
  </div>