marc

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

Recommended Posts

Привет, у меня есть свёрстанный блок, но элементы(круги) не стоят друг под другом, как это исправить?

<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>
.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);

 

пп.png

Share this post


Link to post
Share on other sites

ну как минимум img у вас не флекс было бы не плохо ему тоже вес какой-то установить
по вашей картинке я так понимаю у вас должно быть 3 колонки, добавьте еще пустые div которые будут занимать равное пространство по сравнению с заполненными блоками, тогда вашим картинкам некуда будет девать (при условии, что у них одинаковые размеры) и будут идти друг под другом ровно

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Nathman999
      В #topmenu есть 4 прямоугольника-ссылки:"Основное","HTML","CSS","Сайт"
      Ссылки выглядят примерно так: http://htmlbook.ru/#main 
      Хотя если на них нажать никаких переходов не происходит(по крайней мере в адресной строке хрома ничего не меняется).
      Но панель под этими прямоугольниками меняется. А именно одна из 4-х панелей становится видимой(display: block;).
      Объясните пожалуйста как реализована такая технология.
    • By AndreyCore
      При нажатии на кнопку в форме, сайт не перезагружается как нужно.
      В чем проблема?
      <div class ='div-form'> <h1>CALC</h1> <form id = 'myform'> <label for = 'inp-1'>Число 1</label> <input class = 'inp' id = 'inp-1' type ='text'></input> <br/><p></p> <label for = 'inp-2'>Число 2</label> <input class = 'inp' id = 'inp-2' type = "text"></input></form><br/> <input id = 'bu-end' type ='submit' value ="Суммировать"></input> <p class = 'sum' id = 'sum'>Сумма: <span class = 'sum-r' id = 'sum-r'></span></p> </form><hr/> </div>  
    • By ashelpakov95
      Помогите, делаю чат-бота по этому уроку и коду https://fokit.ru/kak-sozdat-chat-bota-besplatno/
       
      Есть 6 веток вопросов. Я всё удобно подписал <!--Вопрос 1-->,<!--Вопрос 2-->....
      У меня бот прогоняет все вопросы какие есть.  Как сделать, чтобы после каждой ветки вопросов бот прекращал задавать вопросы? и еще, как сделать, чтобы бот выдавал вариант ответа, при нажатии на который, перекидывало на определенную страницу сайта?
      index-22.html
  • Member Statistics

    46,560
    Total Members
    3,128
    Most Online
    AnnaYa
    Newest Member
    AnnaYa
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.