Question

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

＆＃13;

#service_container {
  text-align: center;
}

.servicon {
  font-size: 54px;
}

.service_page_tile {
  background-color: rgba(161, 204, 239, 0.5);
}

＆＃13;

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

＆＃13;

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

Answer 1

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

<强>解决方案：

将div的内容包含在另一个div中，并将margin应用于内部div，或者只是将padding添加到外部div，因为<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>属性已包含在bootstrap中

查看解决方案：

{{1}}

{{1}}

Answer 2

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

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

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

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

2 个答案: