Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 0
Регистрация: 14.06.2017
Сообщений: 1
1

Как между колонками сделать отступ

14.06.2017, 23:32. Просмотров 2081. Ответов 3
Метки нет (Все метки)

Необходимо создать колонки одинаковой высоты как показано на картинке
Ширина колонок в процентах и рекомендуется использовать следующий каркас:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <div class="col-5">
    …
  </div>
  <div class="col-5">
    …
  </div>
  <div class="col-2">
    …
  </div>  
</div>
Сделала сетку из 12 колонок, как между колонками сделать отступ?
0
Миниатюры
Как между колонками сделать отступ  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.06.2017, 23:32
Ответы с готовыми решениями:

Как сделать отступ между картинками?
&lt;main class=&quot;content_1&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;gallery&quot;&gt; ...

Как сделать отступ между ячейками ?

Как сделать горизонтальный отступ между картинками
Есть блок &lt;div&gt; внутри которого 2 изображения, нужно сделать между ними отступ. &lt;div...

Как сделать отступ между строками в таблице
Добрый день! Подскажите пожалуйста как сделать отступ между строками в таблице, чтобы просвечивался...

3
0 / 0 / 0
Регистрация: 14.06.2017
Сообщений: 7
14.06.2017, 23:35 2
flexbox, хорошо решит эту задачу
0
83 / 80 / 42
Регистрация: 20.01.2017
Сообщений: 219
15.06.2017, 13:59 3
padding или margin по бокам
0
106 / 100 / 35
Регистрация: 14.03.2014
Сообщений: 581
15.06.2017, 14:58 4
песочница: https://codepen.io/evgeniyprow... itors=1100

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrap">
  <div class="col v1_mod">
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse aut praesentium sequi eaque reiciendis quae, tempore soluta veniam numquam asperiores reprehenderit ullam illum deleniti eveniet ipsum non, quos labore eius tempora dolore quia, id harum. Nulla ut iure minima architecto ipsam porro. Totam est atque animi illo eligendi sapiente delectus.</p>
  </div>
  <div class="col v2_mod"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, officia deserunt quasi repudiandae facilis, voluptatibus facere quisquam corporis iste. Eligendi doloremque iste error officia. Magnam recusandae, doloribus sequi magni unde accusantium, ipsam qui aliquid, eaque sapiente totam nobis distinctio explicabo nam quam quibusdam. Officiis totam libero, autem incidunt reiciendis, architecto at fuga laudantium quasi beatae laborum ad vitae, repellat. Accusantium error quibusdam delectus, sint harum fugit corrupti a aspernatur quasi esse dolores facere eos in architecto unde dolorum non! Totam autem, facilis ad laboriosam, repudiandae numquam asperiores distinctio nemo nam! Cumque totam repellat ipsa soluta laboriosam quaerat assumenda, dignissimos cupiditate quis rem atque id doloremque nihil nemo sunt, velit optio facilis. Corporis exercitationem ea provident, assumenda minima temporibus cupiditate similique explicabo a quaerat quasi illum culpa aspernatur ducimus est dignissimos quisquam dicta fuga nostrum fugiat dolorum excepturi cumque. Sequi nihil officia qui autem cum sed, non accusantium reprehenderit laboriosam earum recusandae tenetur adipisci placeat eius cupiditate ducimus quod aliquid quis ipsa, neque ab. Natus, reiciendis placeat libero vel, numquam ipsa rem. Doloremque eius mollitia modi! Dolore deleniti saepe beatae libero magni sequi asperiores, error sapiente quaerat labore fugiat repellendus laudantium doloribus, deserunt aut culpa dolorum ducimus quia, minus? Explicabo magni aspernatur, sit commodi possimus fugiat tempore fuga! Vero, autem, rerum quaerat quo quidem iure dolorum sapiente nulla quisquam! Sequi similique deleniti et doloribus delectus consectetur pariatur sapiente quibusdam, perferendis repudiandae at eveniet molestiae quas omnis error nobis dolorum placeat autem reprehenderit vitae atque iure magni nesciunt iste! Cumque, porro! Facilis, aperiam eum. Esse, quisquam, pariatur voluptate ad aliquam eius sed distinctio voluptas quam ipsum praesentium accusantium iste voluptatem quis inventore. Placeat illo, alias vel nisi laboriosam labore molestiae consectetur quam perspiciatis cupiditate officia necessitatibus nobis soluta saepe quas omnis eos sit. Dicta temporibus modi quia qui numquam expedita dignissimos?</p>
  </div>
  <div class="col v3_mod"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam similique cupiditate deleniti libero tenetur, veritatis nihil aspernatur repellendus sed quis? Atque, repudiandae ab reiciendis eius cum dolore ex aut adipisci ad dolorem aperiam natus porro. Suscipit, veritatis dignissimos fugiat explicabo voluptas odio cumque deleniti, unde, molestias error deserunt dolores quas hic magnam sit illo, facilis! Veniam temporibus repellendus molestias deleniti quibusdam eius enim! Aut voluptatem similique accusantium! Obcaecati voluptatibus repellat perferendis, magni aliquam praesentium ad dolore nihil voluptate rerum sunt mollitia ducimus, neque velit, illum. Voluptas, fugit? Numquam, mollitia eum laboriosam rem, delectus veniam, recusandae quis minus incidunt laborum nobis?</p>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
* {
  box-sizing: border-box;
}
 
body {
  background-color: #ccc;
}
 
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 0 -20px -20px;
  padding: 20px;
}
 
.col {
  margin: 0 0 20px 20px;
  padding: 20px;
  background: #fff;
}
.col.v1_mod {
  flex: 3 1 400px;
}
.col.v2_mod {
  flex: 3 1 400px;
}
.col.v3_mod {
  flex: 1 1 200px;
}
Добавлено через 13 минут
если вместо маргинов нужны только паддинги из за бордер-бокса, то:

песочница: https://codepen.io/evgeniyproweb/pen/OgbMRX

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap">
  <div class="col_wrap v1_mod">
    <div class="col">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse aut praesentium sequi eaque reiciendis quae, tempore soluta veniam numquam asperiores reprehenderit ullam illum deleniti eveniet ipsum non, quos labore eius tempora dolore quia, id harum. Nulla ut iure minima architecto ipsam porro. Totam est atque animi illo eligendi sapiente delectus.</p>
    </div>
  </div>
  <div class="col_wrap v2_mod"> 
    <div class="col">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ea, officia deserunt quasi repudiandae facilis, voluptatibus facere quisquam corporis iste. Eligendi doloremque iste error officia. Magnam recusandae, doloribus sequi magni unde accusantium, ipsam qui aliquid, eaque sapiente totam nobis distinctio explicabo nam quam quibusdam. Officiis totam libero, autem incidunt reiciendis, architecto at fuga laudantium quasi beatae laborum ad vitae, repellat. Accusantium error quibusdam delectus, sint harum fugit corrupti a aspernatur quasi esse dolores facere eos in architecto unde dolorum non! Totam autem, facilis ad laboriosam, repudiandae numquam asperiores distinctio nemo nam! Cumque totam repellat ipsa soluta laboriosam quaerat assumenda, dignissimos cupiditate quis rem atque id doloremque nihil nemo sunt, velit optio facilis. Corporis exercitationem ea provident, assumenda minima temporibus cupiditate similique explicabo a quaerat quasi illum culpa aspernatur ducimus est dignissimos quisquam dicta fuga nostrum fugiat dolorum excepturi cumque. Sequi nihil officia qui autem cum sed, non accusantium reprehenderit laboriosam earum recusandae tenetur adipisci placeat eius cupiditate ducimus quod aliquid quis ipsa, neque ab. Natus, reiciendis placeat libero vel, numquam ipsa rem. Doloremque eius mollitia modi! Dolore deleniti saepe beatae libero magni sequi asperiores, error sapiente quaerat labore fugiat repellendus laudantium doloribus, deserunt aut culpa dolorum ducimus quia, minus? Explicabo magni aspernatur, sit commodi possimus fugiat tempore fuga! Vero, autem, rerum quaerat quo quidem iure dolorum sapiente nulla quisquam! Sequi similique deleniti et doloribus delectus consectetur pariatur sapiente quibusdam, perferendis repudiandae at eveniet molestiae quas omnis error nobis dolorum placeat autem reprehenderit vitae atque iure magni nesciunt iste! Cumque, porro! Facilis, aperiam eum. Esse, quisquam, pariatur voluptate ad aliquam eius sed distinctio voluptas quam ipsum praesentium accusantium iste voluptatem quis inventore. Placeat illo, alias vel nisi laboriosam labore molestiae consectetur quam perspiciatis cupiditate officia necessitatibus nobis soluta saepe quas omnis eos sit. Dicta temporibus modi quia qui numquam expedita dignissimos?</p>
    </div>
  </div>
  <div class="col_wrap v3_mod"> 
    <div class="col"> 
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam similique cupiditate deleniti libero tenetur, veritatis nihil aspernatur repellendus sed quis? Atque, repudiandae ab reiciendis eius cum dolore ex aut adipisci ad dolorem aperiam natus porro. Suscipit, veritatis dignissimos fugiat explicabo voluptas odio cumque deleniti, unde, molestias error deserunt dolores quas hic magnam sit illo, facilis! Veniam temporibus repellendus molestias deleniti quibusdam eius enim! Aut voluptatem similique accusantium! Obcaecati voluptatibus repellat perferendis, magni aliquam praesentium ad dolore nihil voluptate rerum sunt mollitia ducimus, neque velit, illum. Voluptas, fugit? Numquam, mollitia eum laboriosam rem, delectus veniam, recusandae quis minus incidunt laborum nobis?</p>
    </div>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
* {
  box-sizing: border-box;
}
 
body {
  background-color: #ccc;
}
 
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 0 -20px -20px;
  padding: 20px;
}
 
.col_wrap {
  padding: 0 0 20px 20px;
}
.col_wrap.v1_mod {
  flex: 3 1 400px;
}
.col_wrap.v2_mod {
  flex: 3 1 400px;
}
.col_wrap.v3_mod {
  flex: 1 1 200px;
}
 
.col {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.06.2017, 14:58

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сделать отступ между шапкой и контейнером с текстом
Правда есть еще вопрос, как сделать отступ между шапкой и контейнером с текстом? Я в CSS написал: ...

Как между полем для ввода и словом сделать отступ?
Как между полем для ввода и словом сделать отступ? Проблема в том, что мне не нравиться что слова...

Как сделать одинаковый отступ между блоками, но кроме краёв контейнера?
Всем привет. Допустим есть контейнер, внутри него несколько одинаковых блоков с margin:15px....

Как задать расстояние между колонками в bootstrap
Добрый день! Подскажите пожалуйста. Верстаю использую сетку bootstrap. Есть ряд, в нем 4 блока....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.