frees2

Возможно, с подобным сталкивался при раскрытии списков. Просто поставьте между блоками прокрутки
<div style="clear: both; "></div>

Единственно правильная стратегия если фронт энд на потоке, сайты и их много в производстве.

Ничем не лучше и не хуже любого тестового файла. Прописать на сервере php вставить туда js, к примеру.

Для этого фотошоп не нужен, если правильно понял, для странички?
1 Надо сжать картинку в jpg, сильно до "квадратиков".
2 dulsky.eu/t/
В старых браузерах не будет работать

Можно привязать к точке, точнее точке с пробелом после, как и положено, очень просто, если подходят тексты для такого

$ot = explode(". ", $description); 
if (isset($ot[1]))  { 
$fu = str_replace($ot[0],"",$description); $toDelete = 1; $fu= mb_substr($fu, $toDelete);
echo '<div class="opisanie"><input type="checkbox" id="hd-1" class="reference"/><label title=" ДАЛЬШЕ... " for="hd-1" >&nbsp;&nbsp; '.$ot[0].'. </label><span class="story"> &nbsp;&nbsp; '.$fu.'</span>'; }else {echo '<div class="opisanie">'.$description.'';};









// echo '<div class="opisanie">&nbsp;&nbsp;'.$description.'';

echo "<tt> просмотров:$viewCount &nbsp;&nbsp;  подписчиков:$subscriberCount &nbsp;&nbsp; загружено:$videoCount</tt>";
echo ' &nbsp;&nbsp;'.$id.'   </div><div style="clear: both; "></div>';






  }

Если вы фон хотите сделать, не пойму, в которjм содержимое?
Стеклянный фон можно так.
https://jsfiddle.net/igord/jgunvkxp/1/

Хороший вопрос, может его расширить, ибо не найти в завалах, как получить или создать ленту твиттера, про json и не мечтаю.

https://jsfiddle.net/k1p3tnyf/8/
Удочка вместо рыбы, пиво пью, некогда подгонять

<?phpphp поставьте классическая ошибка

В общем плохо реализовано, по новому это было бы через объект history и fetch(myRequest).
Не надо никаких плагинов совсем.

https://jsfiddle.net/igord/cm96exzn/5/
Придумал, тут уже критиковали, только рисунок надо уменьшить сильно

Просто в строке пропишите порядок действий.
Чтобы было понятно, работает как часы
onclick=" первое действие; второе; третье; return false"

<a href=\x22#\x22 id=\x22
----------------
Может вроде замены?

Выпадающий вниз, или из блоков по клику на ссылку? Если вниз то так.

<style>
  .cards {  display: flex; flex-wrap: wrap;  align-items: stretch;  }
  .card {  flex: 0 0 20%;  margin: 0px;  border: 0;  } 
  .card .text { padding: 0 2px 2px;  }
  
</style>

<main class="cards">
  <article class="card"> <div class="text">
   1 cccccccccccccc
</div></article>
  
  <article class="card"> <div class="text">
   2  ccccccccccccccccc
</div></article>
  
  
</main>

<button type="button" onmouseover="loadDoc2(); this.style.display='none';return false">открыть список каналов</button>
<ul> </ul>
<script> function loadDoc2(){var myList = document.querySelector('ul');fetch('products.json').then(function(response) { return response.json(); })
.then(function(json) { for(var i = 0; i < json.products.length; i++){var listItem = document.createElement('li');
listItem.innerHTML = '<strong>' + json.products[i].Name + '</strong>';
listItem.innerHTML +=' can be found in ' + json.products[i].Location + '.';
listItem.innerHTML +=' Cost: <strong>?' + json.products[i].Price + '</strong>';
myList.appendChild(listItem); 
 } })};
  </script>

Фиксация (нажатия) ссылки, кнопки как улучшить?
Писал же, спрашивал, так игнорируют, сложность почему то поменяли со сложной на среднюю...
Работает во всех браузерах, тени тоже работают.
Можно поиграться с тенями и фоном ( и без блока, можно с блоком)

button,[role="button"] {cursor: pointer;}
button[aria-pressed="true"],[role="button"][aria-pressed="true"] {  background-color:  #CAE8CA; transition-property: background-color;transition-duration: 0.4s;}

:active, :hover, :focus { outline: 0; outline-offset: 0;}
button[aria-pressed="true"],[role="button"][aria-pressed="true"]:focus  {     background-color:   rgba(204,204,255, 0.9);}
[role="button"]:active { background-color: #bbb;}

:active, :hover, :focus { outline: 0; outline-offset: 0;}
button[aria-pressed="true"],[role="button"][aria-pressed="true"]:focus  {
     background-color:   red;
}

Так можно конечно тоже фиксировать, но не хотелось бы чтобы если в поле кликнуть фокус не пропадал...

var idVhod = document.getElementById('idVhod'); function onclickVhod() { idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline';
localStorage.setItem('hide', idVhod.style.display);}if(localStorage.getItem('hide') == 'inline') { document.getElementById('idVhod').style.display = 'inline'; setTimeout(onclickVhod, 5700)}; 
  
// window.localStorage.clear();

#idVhod {position: fixed; z-index: 100;  top:  3em;   left:  0.3em;  display: none;   background-color: rgba(255,255,255,.9);   padding: 0 0.6em 0.6em 0.8em;margin: 0.1em; box-shadow: rgba(0, 0, 128, 0.2) 0.3em -0.3em 0.7em;border-radius: 0.2em;  }
 .Vhod {cursor: pointer; padding: 0 ; display: inline-block;  border: 2px solid #efefef; border-radius: 20%;margin: 8px;background-color: rgba(255,255,255,.4);}
 .Vhod:hover {opacity: 0.7;}

<span class="Vhod" onclick="onclickVhod()"><img  src="24px.svg"> </span> <span  id="idVhod"> ggggggggggggggg11111111<span class="Vhod" onclick="onclickVhod()"> x</span><br>
gggggggggggggggggggggg
</span>

Explorer 11
1.14%
Совсем недавно было почти 3%.
Если понять, что его никто не собирается развивать, то вполне уже можно игнорировать.
В частности Each защищает от вставки js и что теперь отказываться и городить кучу кода ради ie?