кнопка "Показать еще" Как выровнять контент?
Вообщем ребята подскажите что я тут намудрил? Задача сделать кнопку показать еще рабочей.при нажатии добавляются еще карточки ниже. все сделал вроде добавляются но почему то на места старых карточек и кнопка не сдвигается ниже! я ее как то зафиксировал возможно и блок тоже но не могу понять как! гляньте плз.Если к этому причастны Position... то подскажите как можно по другому прижать объект к низу в случае кнопки?
$(function(){
$('.next1').on('click', function (){
const btn = $(this);
$.ajax({
url: 'data.html',
type: 'GET',
beforeSend: function(){
btn.attr('disabled',true);
},
success: function(responce){
setTimeout(function(){
btn.attr('disabled',false);
$('.next1').before(responce)
}, 1000);
},
error: function(){
alert('Error');
btn.attr('disabled',false);
}
});
});
});
@font-face {
font-family: Geometria;
src: url(../fonts/geometria.ttf) format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Geometria;
src: url(../fonts/geometria-bold.ttf) format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
height:100%;
font-family: Geometria, serif;
margin: 0;
padding: 0;
}
header {
background: url(../img/bg1.jpg) no-repeat center top/cover;
}
.cont {
width: 930px;
margin: 0 auto;
}
.menu {
margin-top: 71px;
float: left;
}
.menu1 {
margin-left: 30px;
margin-top: 80px;
float: left;
}
.menu:hover {
background: #DBDAD9;
}
.logo {
float: left;
margin-left: 170px;
margin-top: 30px;
height: 91px
}
.be {
float: left;
margin-top: 57px;
margin-left: 13px;
}
header p {
float: left;
margin-top: 58px;
margin-left: 30px;
font-family: Geometria, serif;
font-size: 16px;
line-height: 26px;
}
.phone {
float:right;
font-size: 25px;
margin-left: 20px;
}
.call {
float: right;
background: #EEF3FA;
font-family: Geomeria, serif;
padding: 16px 55px;
border: 1px solid #2A94E2;
box-sizing: border-box;
border-radius: 5px;
}
button:hover {
background: #2A94E2;
}
.head h1 {
width: 580px;
font-size: 40px;
line-height: 55px;
font-family: geometria-bold;
text-transform: uppercase;
color: #000000;
padding-top: 30px;
margin-top: 0px;
}
.head {
width: 900px;
display: flex;
flex-wrap: wrap;
}
.par {
padding: 0;
margin-left: 0;
margin-top: 10px;
font-size: 22px;
line-height: 36px;
color: #000000;
}
.sp {
border: solid;
padding: 0;
margin: 0;
float: left;
}
.flex h2 {
margin: 0;
padding: 0;
font-size: 80px;
line-height: 131px;
color: #2A94E2;
}
.flex p {
width: 100px;
margin: 0;
padding: 0;
font-size: 16px;
line-height: 26px;
color: #2A94E2;
margin-right: 100px;
margin-left: 20px;
}
.flex {
width: 80%;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
float: left;
}
.glass {
}
.sham {
margin: 0;
padding: 0;
float: none;
margin-left: -380px;
margin-top: 10px;
}
.vin {
display: flex;
justify-content: space-between;
}
.apart {
margin-top: 20px;
margin-bottom: 10px;
background: #EEF3FA;
font-family: Geomeria, serif;
padding: 16px 90px;
border: 1px solid #2A94E2;
box-sizing: border-box;
border-radius: 5px;
}
.double h2 {
margin: 0 auto;
font-family: Geometria,serif;
font-size: 35px;
line-height: 48px;
text-align: center;
margin-top: 60px;
}
.it {
margin: 0 auto;
font-family: Geometria;
font-size: 20px;
line-height: 36px;
margin-top: 20px;
}
.double {
margin: 0 auto;
width: 930px;
}
.blok{
display: flex;
width: 900px;
height: 350px;
border: solid #F6F6F6;
margin-bottom: 30px;
position: relative;
}
h4 {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
font-family: Geometria serif;
font-size: 18px;
line-height: 70px;
margin-left: 30px;
}
.pic {
display: flex;
justify-content: space-between;
width: 500px;
margin-top: 30px;
}
.pic1 {
width: 300px;
height: 170px;
margin-right: 20px;
}
.picblock {
display: flex;
justify-content: space-between;
font-family: Geometria serif;
font-size: 16px;
line-height: 26px;
align-items: center;
text-align: center;
margin-left: 90px;
width: 75%;
}
.blockleft {
height: 290px;
margin: 0;
width: 60%;
margin: 0px 0px 70px 30px;
border-bottom: 2px solid #F1F1F1;
}
.blockright {
margin-left: 30px;
display: flex;
border-left: 2px solid #F1F1F1;
}
.like {
margin: 40px 0px;
align-items: flex-start;
width: 30px;
}
.it2 {
width: 200px;
font-family: Geometria;
font-size: 12px;
line-height: 26px;
align-items: flex-end;
}
.side{
margin: 0 0 0 20px;
display: flex;
flex-direction: column;
}
.answer {
font-size: 12px;
line-height: 26px;
position: absolute;
bottom: 0px;
left: 50px;
}
.forw {
display: flex;
position: absolute;
bottom: 17px;
left: 400px;
}
.vector {
width: 20px;
height: 10px;
margin: 10px 0 0 10px;
}
.next {
font-size: 16px;
line-height: 26px;
color: #2A94E2;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.next:hover {
margin-top:-5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.trouble {
margin: 0 auto;
width: 930px;
margin-bottom: 60px;
}
.trouble h3 {
font-size: 20px;
line-height: 33px;
color: #FFFFFF;
position: absolute;
}
.trouble h2 {
font-size: 35px;
line-height: 48px;
text-align: center;
margin-top: 60px;
}
.foto {
display: flex;
flex-wrap: wrap;
height: 900px;
position: relative;
}
.f1 {
background: url(../img/pic3.jpg) no-repeat center top/cover;
width: 300px;
height: 600px;
margin-right: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f2 {
background: url(../img/pic4.jpg) no-repeat center top/cover;
width: 300px;
height: 300px;
margin-right: 10px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f3{
background: url(../img/pic5.jpg) no-repeat center top/cover;
width: 300px;
height: 300px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f4 {
background: url(../img/pic6.jpg) no-repeat center top/cover;
width: 609px;
height: 290px;
position: absolute;
bottom: 300px;
right: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f5 {
background: url(../img/pic7.jpg) no-repeat center top/cover;
width: 600px;
height: 290px;
margin-right: 10px;
margin-top: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f6 {
background: url(../img/pic8.jpg) no-repeat center top/cover;
width: 305px;
height: 290px;
margin-right: 10px;
margin-top: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.cal {
background: #EEF3FA;
font-family: Geomeria, serif;
padding: 16px 80px;
border: 1px solid #2A94E2;
box-sizing: border-box;
border-radius: 5px;
position: absolute;
bottom: 320px;
left: 25px;
}
.f1 h3 {
font-size: 22px;
line-height: 33px;
color: #FFFFFF;
position: absolute;
bottom: 450px;
left: 25px;
}
.f1 p {
margin: 0 auto;
color: #FFFFFF;
width: 250px;
font-size: 14px;
position: absolute;
bottom: 400px;
left: 38px;
}
.f2 h3 {
bottom: 0;
left: 20px;
}
.f3 h3 {
bottom: 600px;
right: 20px;
}
.f4 h3 {
bottom: 0;
left: 20px;
}
.f5 h3 {
bottom: 0;
left: 20px;
}
.f6 h3 {
bottom: 0;
right: 130px;
}
.f1 h3:hover {
color: #2A94E2;
}
.f2 h3:hover {
color: #2A94E2;
}
.f3 h3:hover {
color: #2A94E2;
}
.f4 h3:hover {
color: #2A94E2;
}
.f5 h3:hover {
color: #2A94E2;
}
.f6 h3:hover {
color: #2A94E2;
}
.f1:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f2:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f3:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f4:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f5:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f6:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.four h2 {
margin: 0 auto;
font-size: 35px;
line-height: 48px;
text-align: center;
margin-top: 60px;
}
.four p {
text-align: center;
line-height: 48px;
font-size: 20px;
}
-------------------------------
ul{border:0; margin:0; padding:0;
text-align: center;
}
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:16px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color: #FFFFFF;
background: #2A94E2;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding: 20px 28px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
background: #F6F6F6;
}
.catalog {
position: relative;
margin-top: 80px;
height: 1000px;
}
.card img {
width: 100%;
}
.card {
position: relative;
margin: 30px 40px 0 40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
font-family: sans-serif;
width: 400px;
height: 400px;
}
.card:hover {
-moz-box-shadow: 0 0 10px #ffa329;
-webkit-box-shadow: 0 0 10px #ffa329;
box-shadow:0 0 10px #ffa329;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.card h3 {
font-size: 18px;
font-family: Geometria,serif;
margin: 10px 0 0 15px;
float: left;
}
.card p{
margin-left: 15px;
margin-right: 20px;
float: left;
padding: 4px;
font-size: 12px;
}
#price {
position: absolute;
left: 0;
bottom: 80px;
font-size: 20px;
font-family: Geometria,serif;
margin: 0 0 0 15px;
padding: 0;
}
.lot {
position: absolute;
left: 0;
margin: 0 0;
bottom: 110px;
color: #757575;
}
.plo {
position: absolute;
right: 0;
bottom: 65px;
color: #757575;
}
.floor {
margin-right: 40px;
position: absolute;
right: 0;
bottom: 65px;
}
.card button {
position: absolute;
bottom: 0;
left: 0;
font-family: Geomeria, serif;
padding: 10px 145px;
box-sizing: border-box;
border: none;
}
.pricemeter {
position: absolute;
left: 0;
bottom:65px;
color: #757575;
margin-left: 15px;
}
.pos1 {
position: absolute;
right: 0;
top: 0;
}
.pos {
position: absolute;
top: 0;
}
.pos2 {
position: absolute;
top: 440px;
}
.pos3 {
position: absolute;
right: 0;
top: 440px;
}
.next1 {
position: absolute;
bottom: 0;
left: 0;
font-family: Geomeria, serif;
padding: 10px 388px;
box-sizing: border-box;
border: none;
margin: 40px;
.catalog2 {
position: relative;
margin-top: 80px;
height: 1000px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BLITZ ESTATE</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<header>
<div class="cont">
<div>
<img src="img/iconmenu.png" alt="" class="menu">
<p class="menu1">Меню</p>
<img src="img/logofull.png" alt="Blitz Estate" class="logo">
<img src="img/be.png" alt="" class="be">
<p>Продажа недвижимости <br>
в Москва-Сити</p>
<p class="phone">+7 (495) 199-19-99</p>
<button class="call">Заказать звонок</button>
</div>
<div class="head">
<h1>Агентство с международным именем Blitz Estate</h1>
<p class="par">Поможем продать, купить и арендовать <br>
недвижимость в Москве, районе Сити и области</p>
<div class="flex">
<div class="conteiner">
<h2>17</h2>
</div>
<div class="conteiner">
<p>Работаем в 17 странах</p>
</div>
<div class="conteiner">
<h2>1963</h2>
</div>
<div class="conteiner">
<p>Помогли 1963-м клиентам</p>
</div>
<div class="conteiner">
<h2>10</h2>
</div>
<div class="conteiner">
<p>Лет на рынке недвижимости</p>
</div>
</div>
</div>
<div class="vin">
<div class="cont">
<img src="img/glass.png" class="glass">
</div>
<div class="cont">
<p class="sham">Пройди тест и получи в подарок бутылку <br>
шампанского<strong> Veuve Clicquot</strong></p>
</div>
</div>
<button class="apart">Подобрать недвижимость</button>
</div>
</header>
<section class="double">
<div class="cont">
<h2>Пройдите тест из пяти вопросов</h2>
<p class="it">Мы подберем 20 покупателей готовых купить вашу недвижимость в течении 24 часов</p>
</div>
<div class="blok">
<p class="answer">Вы ответили на: 0/5 Вопросов</p>
<div class="forw">
<a href="#" class="next">Продолжить</a>
<img src="img/Vector.png" alt="" class="vector">
</div>
<div class="blockleft">
<div>
<h4>Выбирите местоположение объекта</h4>
</div>
<div class="pic">
<img src="img/pic1.jpg" class="pic1">
<img src="img/pic2.jpg" class="pic1">
</div>
<div class="picblock">
<p class="text">В России</p>
<p class="text">За границей</p>
</div>
</div>
<div class="blockright">
<div class="side">
<img src="img/6.png" alt="" class="like">
<img src="img/6.png" alt="" class="like">
<img src="img/6.png" alt="" class="like">
</div>
<div class="side">
<p class="it2">Поможем Вам приобрести, продать или арендовать необходимую недвижимость</p>
<p class="it2">Продадим вашу недвижимость за 21 день или выкупим сами по стоимостьи в договоре</p>
<p class="it2">Забронируем понравившуюся квартиру и зафиксируем стоимость для вас на момент бронирования</p>
</div>
</div>
</div>
</section>
<section class="trouble">
<div class="cont">
</div>
<h2>Наши услуги на международном рынке</h2>
<div class="foto">
<div class="f1">
<a href="#" ><h3>Жилая недвижимость</h3></a>
<p>Сопровождение сделок по продаже, купли и аренде объектов недвижимости под ключ.</p>
<button class="cal">Узнать больше</button>
</div>
<div class="f2">
<a href="#"><h3>Доходная недвижимость</h3></a>
</div>
<div class="f3">
<a href="#"><h3>Инвестиционные операции</h3></a>
</div>
<div class="f4">
<a href="#"><h3>Покупка Яхт</h3></a>
</div>
<div class="f5">
<a href="#"><h3>Доверительное управление</h3></a>
</div>
<div class="f6">
<a href="#"><h3>Консьерж сервис</h3></a>
</div>
</div>
</section>
<section class="four">
<div class="cont">
<h2>Выбирите апартаменты в Москва-Сити</h2>
<p>Мы включили в наш каталог все апартаменты доступные для покупки в Москва-Сити</p>
<ul id="pagination-flickr">
<li><a href="?page1">Показать все</a></li>
<li><a href="?page=2">От 20-30 млн</a></li>
<li><a href="?page=3">От 30-50 млн</a></li>
<li><a href="?page=4">От 50-100 млн</a></li>
<li><a href="?page=5">Более 100 млн</a></li>
</ul>
<div class="catalog">
<div class="card pos">
<img src="img/apart1.jpg" alt="apart1">
<h3>Апартаменты в «башне ОКО»</h3>
<p class="lot">Лот № 4536</p>
<p id="price">25 600 000 ₽₽</p>
<p class="plo">Площадь 70м²</p>
<div class="floor">Этаж 52</div>
<div class="pricemeter">365 714 ₽ за м²</div>
<button>Назначить просмотр</button>
</div>
<div class="card pos1">
<img src="img/apart2.jpg" alt="apart1">
<h3>Апартаменты в «башне Империя»</h3>
<p class="lot">Лот № 4547</p>
<p id="price">27 900 000 ₽</p>
<p class="plo">Площадь 62м²</p>
<div class="floor">Этаж 35</div>
<div class="pricemeter">420 000 ₽ за м²</div>
<button>Назначить просмотр</button>
</div>
<div class="card pos2">
<img src="img/apart3.jpg" alt="apart1">
<h3>Апартаменты в «Neva Towers»</h3>
<p class="lot">Лот № 4548</p>
<p id="price">19 000 000 ₽</p>
<p class="plo">Площадь 40м²</p>
<div class="floor">Этаж 16</div>
<div class="pricemeter">475 000 ₽ за м²</div>
<button>Назначить просмотр</button>
</div>
<div class="card pos3">
<img src="img/apart4.jpg" alt="apart1">
<h3>Апартаменты в комплексе «Федерация»</h3>
<p class="lot">Лот № 4549</p>
<p id="price">59 500 000 ₽</p>
<p class="plo">Площадь 110м²</p>
<div class="floor">Этаж 84</div>
<div class="pricemeter">540 909 ₽ за м²</div>
<button class=>Назначить просмотр</button>
</div>
<button class="next1">Показать еще</button>
</div>
</div>
</section>
<section>
<div class="cont">
</div>
</section>
<section>
<div class="cont">
</div>
</section>
<section>
<div class="cont">
</div>
</section>
<footer>
<div class="cont">
</div>
</footer>
</body>
</html>