Добрый день. Подскажите пожалуйста, как расположить карточки в ряд
.section-app {
padding-bottom: 80px;
}
.name-app{
text-align: center;
font-family: "MYRIADPRO-REGULAR",Arial, sans-serif;
margin-top: 106px;
color: #333b42;
}
.text-app {
text-align: center;
margin-top: 36px;
color: #74797e;
font-size: 14px;
}
.cards {
padding-top: 40px;
padding-bottom: 150px;
}
.track{
width: 190px;
display: inline-block;
}
.track:nth-child (2) {
margin-left: 200px;
}
.track:nth-child (3) {
margin-left: 100px;
}
.track:last-child {
float: right;
}
.round {
text-align: center;
border-radius: 50%;
width: 136px;
height: 136px;
background: #8500d2;
margin-right: auto;
margin-left: auto;
}
.track-img {
position: relative;
width: 53px;
height: 43px;
top: 44px;
}
.track-name{
text-align: center;
font-family: GothemB,Arial, sans-serif;
font-size: 17px;
color: #333b42;
}
.track-text {
text-align: center ;
color: #74797e;
font-size: 14px;
font-weight: 25;
}
.ellipse-pirp {
width: 140px;
position: relative;
left: -2px;
}
<section class="section-app">
<div class="container clearfix">
<h2 class="name-app">FEATURES OF APP</h2>
<p class="text-app">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut <br> labore et dolore magna aliqua.
</p>
<div class="cards clearfix">
<div class="track">
<div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
<h3 class="track-name">Lorem ipsum dolor sit</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
</p>
</div>
<div class="track">
<div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
<h3 class="track-name">ametconsectetur</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
</p>
</div>
<div class="track">
<div class="round">
<img class="track-img" src="img/Shape%[email protected]" alt="">
</div>
<h3 class="track-name">Lorem ipsum dolor sit</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
</p>
</div>
<div class="track">
<div class="round">
<img class="track-img" src="img/Shape%[email protected]" alt="">
</div>
<h3 class="track-name">Lorem ipsum dolor sit</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud </p>
</div>
</div>
</div>
</section>
Ответы (1 шт):
Автор решения: InDevX
→ Ссылка
Так?
.section-app {
padding-bottom: 80px;
}
.name-app{
text-align: center;
font-family: "MYRIADPRO-REGULAR",Arial, sans-serif;
margin-top: 106px;
color: #333b42;
}
.text-app {
text-align: center;
margin-top: 36px;
color: #74797e;
font-size: 14px;
}
.cards {
padding-top: 40px;
padding-bottom: 150px;
display: flex;
justify-content: center;
}
.track{
width: 190px;
display: inline-block;
}
.track:nth-child (2) {
margin-left: 200px;
}
.track:nth-child (3) {
margin-left: 100px;
}
.track:last-child {
float: right;
}
.round {
text-align: center;
border-radius: 50%;
width: 136px;
height: 136px;
background: #8500d2;
margin-right: auto;
margin-left: auto;
}
.track-img {
position: relative;
width: 53px;
height: 43px;
top: 44px;
}
.track-name{
text-align: center;
font-family: GothemB,Arial, sans-serif;
font-size: 17px;
color: #333b42;
}
.track-text {
text-align: center ;
color: #74797e;
font-size: 14px;
font-
<section class="section-app">
<div class="container clearfix">
<h2 class="name-app">FEATURES OF APP</h2>
<p class="text-app">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut <br> labore et dolore magna aliqua.
</p>
<div class="cards clearfix">
<div class="track">
<div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
<h3 class="track-name">Lorem ipsum dolor sit</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
</p>
</div>
<div class="track">
<div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
<h3 class="track-name">ametconsectetur</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
</p>
</div>
<div class="track">
<div class="round">
<img class="track-img" src="img/Shape%[email protected]" alt="">
</div>
<h3 class="track-name">Lorem ipsum dolor sit</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
</p>
</div>
<div class="track">
<div class="round">
<img class="track-img" src="img/Shape%[email protected]" alt="">
</div>
<h3 class="track-name">Lorem ipsum dolor sit</h3>
<p class="track-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud </p>
</div>
</div>
</div>
</section>
Для .cards добавил всего 2 стиля - display: flex; justify-content: center; (почитать про flex -> CSS flexbox). По-хорошему, вам всё переверстать нужно, float'ы неактуальны уже приличное время, всё без них красиво и качественно сделать можно. И советую посмотреть в сторону уже готовых библиотек, аля bootstrap