разделение элементов в ряд с цветом фона - PullRequest
Новая
       47

разделение элементов в ряд с цветом фона

0 голосов
/ 12 июня 2018

Мне нужно разделить три деления, оставаясь на одной строке, но цвет фона друг друга не позволяет этого.Проблема в том, что когда я устанавливаю дополнительное поле или отступы, элементы 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/

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Быстрое и грязное решение состоит в том, чтобы использовать прозрачную границу, а затем обрезать фон до его внутренней границы: 

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

Преимущество этого решения состоит в том, что блок цветного фона мозаичного изображения будет иметьодинаковая высота для всех трех плиток.

0 голосов
/ 12 июня 2018

Когда вы добавляете поле для вашего элемента с фиксированной шириной, вычисленная ширина добавляет значение поля к фиксированной ширине, что приведет к тому, что оно окажется ниже, и это потому, что в той же строке больше нет места

Решение:

Оберните содержимое ваших div'ов внутри другого div и примените margin к внутреннему 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>
...