Тег Section, а точнее как сделать так, чтобы они шли вертикально друг за другом

@Nikita_Le · Регистрация: 26.06.2019

Author24 — интернет-сервис помощи студентам

Как сделать так, чтобы они шли вертикально друг за другом. Как это лучше реализовать это... И есть ли другой способ, без использования тега div... Или он обязателен?
Прошу сильно не ругать, а помочь...
Заранее спасибо

HTML5

<section class="services">
            <div id="main_name">
            <span id="title" name="#Services">Services</span><br/>
            <span id="subtitle">Proin iaculis purus consequat sem cure</span>
            </div>
            <div class="services_info" id="Commerce">
                <h5 class="Services_item">E-Commerce</h5>
                <p class="item">Proin iaculis purus consequat sem cure<br/> 
digni ssim. Donec porttitora entum<br/> suscipit</p>
            </div>
            <div class="services_info" id="Responsive">
                <img src="" alt="">
                <h5 class="Services_item 2">Responsive Web</h5>
                <p class="item">Proin iaculis purus consequat sem cure<br/> digni ssim. Donec porttitora entum<br> suscipit </p>
            </div>
            <div class="services_info" id="Security">
                <img src="" alt="">
                <h5 class="Services_item">Web Security</h5>
                <p class="item">Proin iaculis purus consequat sem cure<br> digni ssim. Donec porttitora entum<br/> suscipit</p>
            </div>
        </section>
 
 
<!-- --------------------------------Portfolio------------------------ -->
        <section class="portfolio">
            <div class="main_name">
                <span id="title">Our portfolio</span>
                <span id="subtitle">Proin iaculis purus consequat sem cure. </span>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
        </section>

CSS

.services{
    height: auto;
    position:absolute;
    left: 230px;
    right: 230px;
    display: block;
}
 
.portfolio{
    width: 940px;
    height: 1036px;
    background:skyblue;
    display: block;
    position:absolute;
    left: 230px;
    right: 230px;
}

@Your_Euphoria · 26.06.2019, 00:41

Зачем вам position: absolute? Уберите и они будут идти вертикально.

И вообще большинство стилей удалить можно, они итак работают.
Section изначально блочный, высота подстроится под содержимое, а жестко задавать как в .portfolio не рекомендуется.
Left и right тоже непонятны, хотите чтобы содержимое было по центру?

@Nikita_Le · 26.06.2019, 16:11 **[ТС]**

Да нужно, что б они были по центру

@Academik · 26.06.2019, 16:43

Nikita_Le, чтоб выровнять блоки по центру, можно воспользоваться таким методом:

HTML5

<div class="container">
    <section class="services">
 
    </section>
    <section class="portfolio">
 
   </section>
</div>

CSS

.container{
  max-width: 1000px;
  margin: 0 auto;
}

А у классов services и portfolio удалите все, кроме фона. В данном случае это все лишнее.

@Nikita_Le · 26.06.2019, 21:38 **[ТС]**

Извините пожалуйста... Можете мне помочь нужно что бы эти три блока встали горизантально в ряд с margin-right:65px;
И помещались в этот блок...

HTML5

<div class="main_container">
        <section class="services">
            <div class="main_name">
            <span id="main_title" name="#Services">Services</span><br/>
            <span id="main_subtitle">Proin iaculis purus consequat sem cure</span>
            </div>
            <div class="services_info" id="Commerce">
                <h5 class="Services_item">E-Commerce</h5>
                <p class="item">Proin iaculis purus consequat sem cure<br/> 
digni ssim. Donec porttitora entum<br/> suscipit</p>
            </div>
            <div class="services_info" id="Responsive">
                <img src="" alt="">
                <h5 class="Services_item 2">Responsive Web</h5>
                <p class="item">Proin iaculis purus consequat sem cure<br/> digni ssim. Donec porttitora entum<br> suscipit </p>
            </div>
            <div class="services_info" id="Security">
                <img src="" alt="">
                <h5 class="Services_item">Web Security</h5>
                <p class="item">Proin iaculis purus consequat sem cure<br> digni ssim. Donec porttitora entum<br/> suscipit</p>
            </div>
        </section>
 
 
<!-- --------------------------------Portfolio------------------------ -->
        <section class="portfolio">
            <div class="main_name">
                <span id="main_title">Our portfolio</span>
                <p id="main_subtitle">Proin iaculis purus consequat sem cure. </p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
                <div class="portfolio_info">
                    <h5 class="potfolio_item"></h5>
                    <p class="item"></p>
                </div>
        </section>
    </div>

CSS

.main_container{
  max-width: 1000px;
  margin: 0 auto;
}
.services_info{
    text-align: center;
    display: inline-block;
    margin-top: 80px;
    margin-right: 65px;
    padding:80px 0 0 0 ;
}
#Commerce{
    background: url(images/Icon/Services/1.png) no-repeat  top center;
}
 
#Responsive{
    background: url(images/Icon/Services/2.png) no-repeat  top center;
    padding: 61px 0 0 0;
}
 
#Security{
    background: url(images/Icon/Services/3.png)no-repeat  top center;
    margin-left: 0;
    padding: 61px 0 0 0;
}

@Academik · 28.06.2019, 19:10

Nikita_Le, https://jsfiddle.net/Academik/3cLdnjbm/

HTML5

<div class="row">
  <div class="services_info" id="Commerce">
    <h5 class="Services_item">E-Commerce</h5>
    <p class="item">Proin iaculis purus consequat sem cure<br/> digni ssim. Donec porttitora entum<br/> suscipit</p>
  </div>
  <div class="services_info" id="Responsive">
    <h5 class="Services_item 2">Responsive Web</h5>
    <p class="item">Proin iaculis purus consequat sem cure<br/> digni ssim. Donec porttitora entum<br> suscipit </p>
  </div>
  <div class="services_info" id="Security">
    <h5 class="Services_item">Web Security</h5>
    <p class="item">Proin iaculis purus consequat sem cure<br> digni ssim. Donec porttitora entum<br/> suscipit</p>
  </div>
</div>

CSS

.row{
  display: flex;
  align-items: stretch;
}
 
.services_info{
  margin-left: 65px;
  flex-grow: 3;
}

@Your_Euphoria 61 / 46 / 20 Регистрация: 13.06.2019 Сообщений: 101
	26.06.2019, 00:41	2
	Зачем вам `position: absolute`? Уберите и они будут идти вертикально. И вообще большинство стилей удалить можно, они итак работают. Section изначально блочный, высота подстроится под содержимое, а жестко задавать как в .portfolio не рекомендуется. Left и right тоже непонятны, хотите чтобы содержимое было по центру? 1

@Nikita_Le 0 / 0 / 0 Регистрация: 26.06.2019 Сообщений: 9
	26.06.2019, 16:11 [ТС]	3
	Да нужно, что б они были по центру 0

	28.06.2019, 19:10