Форум Сайтостроение Веб-строительство

Порядок следования DIV и HTML

12345678 ...11
MrDesigner
На сайте с 31.01.2008
Offline
193
MrDesigner
3001

Здравствуйте!

Есть, допустим, некий код: 

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>Title</title>

</head>

<body>

  

<div class="1">

<p>секция1</p>

</div>



<div class="2">

<p>секция2</p>

</div>



<div class="3">

<p>секция3</p>

</div>



<div class="test">

<p>секция Test</p>

</div>



</body>

</html>

Который выводится блоками друг под другом: 

секция1



секция2



секция3



секция Test

Можно ли сделать так, чтобы <div class="test"> выводился, допустим, между дивом1 и дивом2, но в исходном html-коде содержимое дива Test всё равно располагалось в самом низу?

ArbNet
На сайте с 27.10.2019
Offline
124
ArbNet
#1

Используйте flex или grid

Обсуждение разработки на моём фреймворке https://discord.gg/23N4s9x2kp
S
На сайте с 30.09.2016
Offline
469
Sitealert
#2

Через javascript можно.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Оксиген
На сайте с 30.07.2006
Offline
444
Оксиген
#3
MrDesigner:
Можно ли сделать так

Можно. Bootstrap 4 имеет все инструменты для этого.

Магазин готовых сайтов (https://www.bdb.ru/shop/) Продление доменов в RU-CENTER по партнерским тарифам.
S
На сайте с 30.09.2016
Offline
469
Sitealert
#4
Оксиген:
Можно. Bootstrap 4 имеет все инструменты для этого.

Ага. Чтобы блок переставить, будем буцтрап грузить. 🤪

MrDesigner
На сайте с 31.01.2008
Offline
193
MrDesigner
#5
Оксиген:
Можно. Bootstrap 4 имеет все инструменты для этого.

Э, не! Никаких Bootstrap'ов! Буду методом проб и ошибок экспериментировать с грид или флекс. Совсем чайник же (это я про себя)!

Оксиген
На сайте с 30.07.2006
Offline
444
Оксиген
#6
Sitealert:
Чтобы блок переставить, будем

Нет конечно! Лучше изобрести свой велосипед! :D Чем вставить несколько строчек кода, которые, кстати говоря, уже давным-давно загружены на ближайший сервер CDN.

---------- Добавлено 31.01.2020 в 15:48 ----------

MrDesigner:
Буду методом проб и ошибок экспериментировать

Всё уже давным-давно за вас написано. Но вольному - воля!

ISPmanager -> FastPanel простой Проблема с гугл аккаунтом Ситуация с биллинг панелями
ArbNet
На сайте с 27.10.2019
Offline
124
ArbNet
#7 


<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>Title</title>

</head>

<style>

body {

     display: flex;

     flex-direction: column;

}

div[class="c1"]{

     order: 1

}

div[class="c2"]{

     order: 3

}

div[class="c3"]{

     order: 4   

}

div[class="test"]{

     order: 2

}

</style>

<body>

  

<div class="c1">

<p>секция1</p>

</div>



<div class="c2">

<p>секция2</p>

</div>



<div class="c3">

<p>секция3</p>

</div>



<div class="test">

<p>секция Test</p>

</div>



</body>

</html>

🍿

S
На сайте с 30.09.2016
Offline
469
Sitealert
#8
Оксиген:
Нет конечно! Лучше изобрести свой велосипед! :D Чем вставить несколько строчек кода, которые, кстати говоря, уже давным-давно загружены на ближайший сервер CDN.

Это да. Некоторые "продвинутые" уже и двух строчек не могут написать без буцтрапов. 😂

WebJunior
На сайте с 11.06.2010
Offline
155
WebJunior
#9

ArbNet, почему не вот так: "div.с1"?

---------- Добавлено 31.01.2020 в 15:18 ----------

Слабонервным дальше не читать!


<style>
body {
display: flex;
flex-direction: column;
}
div[blok1]{
order: 1
}
div[blok2]{
order: 3
}
div[blok3]{
order: 4
}
div[blok_test]{
order: 2
}
</style>
<body>

<div blok1>
<p>секция1</p>
</div>

<div blok2>
<p>секция2</p>
</div>

<div blok3>
<p>секция3</p>
</div>

<div blok_test>
<p>секция Test</p>
</div>

🤪

---------- Добавлено 31.01.2020 в 15:19 ----------

p.s. ... работает!)

Мой сайт на этом хостинге - https://tuthost.ua/?from=2558 / Верстаю шаблоны (темы с отзывами: https://searchengines.guru/ru/forum/763758, https://searchengines.guru/ru/forum/600404 ).
ArbNet
На сайте с 27.10.2019
Offline
124
ArbNet
#10

WebJunior, Можно и так.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Title</title>
</head>
<style>
body {
     display: grid;
     grid-template-areas:
     "c1"
     "test"
     "c2"
     "c3"
}
div.c1{grid-area: c1}
div.c2{grid-area: c2}
div.c3{grid-area: c3}
div.test{grid-area: test}
</style>
<body>
  
<div class="c1">
<p>секция1</p>
</div>

<div class="c2">
<p>секция2</p>
</div>

<div class="c3">
<p>секция3</p>
</div>

<div class="test">
<p>секция Test</p>
</div>

</body>
</html>
12345678 ...11

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий