Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
macr
0 / 0 / 0
Регистрация: 27.11.2017
Сообщений: 84
1

Разместить в одну колонку

09.01.2018, 23:23. Просмотров 366. Ответов 1

Привет, у меня есть свёрстанный блок, но элементы(круги) не стоят друг под другом, как это исправить?
HTML5
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
36
37
38
<section id="about">
        <div class="container">
            <div class="title">
                <h2>
                    About Us
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur.
                </p>
            </div>
            <div class="timeline-holder">
                <div class="box">
                    <div class="left">
                        <h3>July 2018 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p>
                    </div>
                    <img src="img/about1.jpg" alt="" />
                </div>
                <div class="box">
                    <div class="right">
                        <h3>January 2018 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
                    <img src="img/about2.jpg" alt="" />
                </div>
                <div class="box">
                    <div class="left">
                        <h3>December 2018 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
                    <img src="img/about3.jpg" alt="" />
                </div>
                <div class="box">
                    <div class="right">
                        <h3>February 2019 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
                    <img src="img/about4.jpg" alt="" />
                </div>
            </div>
    </section>
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
.about{
    margin-top: 86px;
}
 
.timeline-holder {
  position: relative;
}
 
.box {
  display: flex;
  align-items: center;
  margin: 60px 0;
}
 
.box .left {
  flex: 1;
  padding: 0 20px;
}
 
.box .right {
    direction: rtl;
  flex: 1;
  padding: 0 20px;
}
 
.box:nth-child(even) { 
  margin-right: calc(50% - 75px);
}
 
.box:nth-child(odd) {  
  flex-direction: row-reverse;
  margin-left: calc(50% - 75px);
0
Миниатюры
Разместить в одну колонку  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.01.2018, 23:23
Ответы с готовыми решениями:

Все в одну колонку и не листается
Можете подсказать, что я делаю не так, почему у меня все идет в одну колонку и...

Как расположить блоки в одну колонку при уменьшении ширины окна
Я имею 15-ть блоков div, они разположены по три в ряд, по центру. Если...

Не получается разместить два блока в одну строку
Создан блок на 100% ширины экрана в нем у меня есть блок, который я располагаю...

Как разместить 3 блока в одну линии горизонтально?
Как разместить 3 блока в одну линии горизонтально? .content-1{...

Разместить описание пунктов меню в одну строку
А именно нужно кнопку &quot;Сайты для бизнеса&quot; поместить в одну строку без переноса...

1
Mikhail Shell
50 / 50 / 39
Регистрация: 15.11.2014
Сообщений: 626
10.01.2018, 21:04 2
Цитата Сообщение от macr Посмотреть сообщение
CSS
1
2
3
4
5
6
.box:nth-child(even) { 
 margin-right: calc(50% - 75px);
}
.box:nth-child(odd) { 
 flex-direction: row-reverse;
 margin-left: calc(50% - 75px);
Возможно там где у Вас 75px нужно заменить это число на половину ширины картинки. Я просто пробовал по вашему коду картинке поставить 100px, а calc(50% - 50px)
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.01.2018, 21:04

Разместить равномерно 5 элементов в одну строку Bootstrap
Здравствуйте. Столкнулся с проблемой, нужно разместить 5 элементов (блоков) -...

Как разместить элементы в одну строку внутри col-md
Есть следующий код: &lt;div class=&quot;col-md-4&quot; style=&quot;width: auto; margin-left:...

Как два класса разместить в одну строку, но с разных сторон?
Сейчас код такой HTML &lt;body&gt; &lt;div class=&quot;nav&quot;&gt; &lt;ul...


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

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

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