Интервал между 3 разделениями равной ширины (адаптивный)

#html #css

#HTML #css

Вопрос:

У меня есть три раздела одинаковой ширины и третий раздел для расширения на всю ширину ниже точки останова (991px, если быть точным), и все разделы накладываются друг на друга, когда ширина браузера ниже 767px, и теперь я хочу равные поля (между разделениями и по краям), поэтому, пожалуйста, дайте мне знатьвыход. И я хочу добиться этого без каких-либо рамок, т.е. просто с помощью css.

Вот код:

 * {
  box-sizing: border-box;
}
h1 {
  margin: 25px;
  text-align: center;
}
div[class|=col] {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid black;
}
html,
body {
  margin: 15px;
}
.title {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  width: 25%;
  position: absolute;
  top: 0px;
  right: 0px;
  color: black;
  text-align: center;
}
#Title1 {
  background-color: orange;
}
#Title2 {
  background-color: white;
}
#Title3 {
  background-color: green;
}
p {
  background-color: gray;
  width: 100%;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
  font-family: Helvetica;
  color: black;
}
.row {
  width: 100%;
}

 <div class="row">
  <div class="col-lg-4 col-md-6 ">
    <section id="Title1" class="title">Chicken</section>
    <p>Some text</p>
  </div>

  <div class="col-lg-4 col-md-6">
    <section id="Title2" class="title">Beef</section>

    <p>Some text</p>
  </div>

  <div class="col-lg-4 col-md-12">
    <section id="Title3" class="title">Sushi</section>

    <p>Some text</p>
  </div>
</div>

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

2. Извините, если я не смог правильно сформулировать свои требования. -Я хочу равный интервал между элементами во всех точках останова. -Для меня вполне подходит любое количество места для интервала, пока они не будут вести себя в соответствии с шириной браузера.

Ответ №1:

Добавьте классы к 3 разделам: div-1, div-2, div-3

 @media only screen and (max-width:766px) {
     .div-1.div-2.div-3 {
         margin-bottom: 10px;
     }
}

Таким образом, вы можете добавить поля для определенного разрешения в соответствии с вашими требованиями.

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