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

MrDesigner

31 января 2020, 07:36

2976

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

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

<!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

31 января 2020, 07:48

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

Sitealert

31 января 2020, 11:57

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

Оксиген

31 января 2020, 12:13

MrDesigner:
Можно ли сделать так

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

Sitealert

31 января 2020, 12:17

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

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

MrDesigner

31 января 2020, 12:46

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

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

Оксиген

31 января 2020, 12:47

Sitealert:
Чтобы блок переставить, будем

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

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

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

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

ArbNet

31 января 2020, 12:56


<!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>

🍿

Sitealert

31 января 2020, 13:04

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

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

WebJunior

31 января 2020, 13:07

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

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

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

<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. … работает!)

ArbNet

31 января 2020, 13:19

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>

Похожие записи:

Добавить комментарий Отменить ответ