0

Нужно расположить блоки таким образом:введите сюда описание изображения

Только вот не знаю, как правильно сделать. Взять 2 блока родителя по 50% и в них располагать, или же можно как-то иначе?

Вот что у меня получается без блоков-родителей.

.contbody {
  float: left;
  margin-left: 1%;
  width: 100%;
}
.contbody h4 {
  color: #4a275c;
  font-size: 18px;
  font-weight: 700;
}
.txtbody {
  float: left;
  width: 48%;
  margin-right: 2%;
}
.txtbody p {
  font-size: 14px;
  font-weight: 400;
  color: #090213;
}
.txtbody p {
  padding-left: 20px;
  position: relative;
}
.txtbody p:before {
  content: "\2714";
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
}
<div class="contbody">
  <h4>Общие параметры линейки :</h4>
  <div class="txtbody">
    <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  <div class="txtbody">
    <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p>
  </div>
</div>

Можно ли в моём случае выровнять их как на картинке?

2 ответа 2

2

Пример с использованием - columns

.contbody-container{
  float: left;
  margin-left: 1%;
  width: 100%;
}
.contbody {  
  -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
.contbody h4 {
  color: #4a275c;
  font-size: 18px;
  font-weight: 700;
}
.txtbody{}
.txtbody p {
  font-size: 14px;
  font-weight: 400;
  color: #090213;
}
.txtbody p {
  padding-left: 20px;
  position: relative;
}
.txtbody p:before {
  content: "\2714";
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
}
<div class="contbody-container"> 
<h4>Общие параметры линейки :</h4>
<div class="contbody">  
  <div class="txtbody">
    <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  <div class="txtbody">
    <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p>
  </div>
  <div class="txtbody">
    <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p>
  </div>
</div>
</div>

1

пожалуй, только, родитель типа col поможет:

Пример:

* {
  box-sizing: border-box;
}

.contbody {
  float: left;
  margin-left: 1%;
  width: 100%;
}
.contbody h4 {
  color: #4a275c;
  font-size: 18px;
  font-weight: 700;
}

.col {
  width: 48%;
  margin-right: 2%;
  float: left;
}
.txtbody p {
  font-size: 14px;
  font-weight: 400;
  color: #090213;
}
.txtbody p {
  padding-left: 20px;
  position: relative;
}
.txtbody p:before {
  content: "\2714";
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
}

.col:nth-of-type(2n+1){
  clear: both;
}
<div class="contbody">
  <h4>Общие параметры линейки :</h4>
  <div class="col">
    <div class="txtbody">
    <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  </div>
  <div class="col">
    <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  <div class="txtbody">
    <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p>
  </div>
  </div>
  
</div>

Еще вариант с inline-block:

* {
  box-sizing: border-box;
}

.contbody {
  float: left;
  margin-left: 1%;
  width: 100%;
}
.contbody h4 {
  color: #4a275c;
  font-size: 18px;
  font-weight: 700;
  flex: 1 100%;
}

.col {
  width: 47%;
  display: inline-block;
  vertical-align: top;
  margin-right: 2%;
}
.txtbody p {
  font-size: 14px;
  font-weight: 400;
  color: #090213;
}
.txtbody p {
  padding-left: 20px;
  position: relative;
}
.txtbody p:before {
  content: "\2714";
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
}
<div class="contbody">
  <h4>Общие параметры линейки :</h4>
  <div class="col">
    <div class="txtbody">
    <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  </div>
  <div class="col">
    <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  <div class="txtbody">
    <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p>
  </div>
  </div>
  
</div>

Вариант с flex:

* {
  box-sizing: border-box;
}

.contbody {
  float: left;
  margin-left: 1%;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.contbody h4 {
  color: #4a275c;
  font-size: 18px;
  font-weight: 700;
  flex: 1 100%;
}

.col {
  width: 47%;
  margin-right: 2%;
}
.txtbody p {
  font-size: 14px;
  font-weight: 400;
  color: #090213;
}
.txtbody p {
  padding-left: 20px;
  position: relative;
}
.txtbody p:before {
  content: "\2714";
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
}
<div class="contbody">
  <h4>Общие параметры линейки :</h4>
  <div class="col">
    <div class="txtbody">
    <p>Интегрированная компрессорная станция с адсорбционным осушителем и грамотной системой управления и диагностики представляет собой абсолютно новый стандарт качества производства сжатого воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  </div>
  <div class="col">
    <div class="txtbody">
    <p>Диагностика и управление эксплуатационными режимами для увеличения эффективности и увеличения срока службы.</p>
  </div>
  <div class="txtbody">
    <p>В результате удобной установки деталей в общем корпусе была создана интегрированная компоновка компрессорной станции, легко подключаемой к потребителям воздуха.</p>
  </div>
  <div class="txtbody">
    <p>Современные и высокоэффективные компоненты (новый блок 5-го поколения A150).</p>
  </div>
  </div>
  
</div>

4
  • Да, но посмотрите на картинке, там слева один большой блок - справа два маленьких. 18 сен 2016 в 10:02
  • Там не очищается обтекание. Тогда для них нужно делать два родителя? 18 сен 2016 в 10:03
  • 1
    Точно), на Ваш пример ориентировалась и не увидела еще абзац) sorry
    – SVE
    18 сен 2016 в 10:09
  • 1
    @Александр, немножко исправила ответ, но все варианты с обертками.
    – SVE
    18 сен 2016 в 10:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.