用背景颜色分隔一行中的元素答案

【问题标题】：separating elements in a row with background color用背景颜色分隔一行中的元素
【发布时间】：2018-11-21 23:11:45
【问题描述】：

我需要将三个 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/

【问题讨论】：

* {box-sizing:border-box;}
您忘记链接 Bootstrap 了吗？
@Chiller 如果他正在使用应该包含的引导程序
nope bootstrap 不存在
是的，我正在使用 Bootstrap4。它仍然不起作用，都添加了填充或边距。我应该只将它应用于中间的瓷砖吗？

标签： html css twitter-bootstrap bootstrap-4 frontend

【解决方案1】：

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

解决方案：

将 div 的内容包装在另一个 div 中，并为内部 div 应用边距，或者只为外部 div 添加填充，因为box-sizing 属性已包含在引导程序中

查看解决方案：

#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>

【讨论】：

【解决方案2】：

快速而肮脏的解决方案是使用透明边框，然后将背景剪切到其内部边界：

.service_page_tile {
  background-color: rgba(161, 204, 239, 0.5);
  background-clip: padding-box;
  border: 8px solid transparent;
}

此解决方案的一个优点是图块背景色块对于所有三个图块具有相同的高度。

【讨论】：