TransWikia.com

Не работает display:inline-block

Stack Overflow на русском Asked by Вася Васинн on July 22, 2020

Не работает display:inline-block, блоки находятся в разных частях страницы, налазят на другие элементы. Как это исправить?

#text1 {
  color: green;
  text-align: center;
  font-size: 25px;
  font-family: Calibri;
  font-weight: lighter;
}

#borov {
  width: 384px;
  height: 384px;
  position: relative;
  left: 175px;
  border: 1px solid black;
}

#borovtupo {
  width: 768px;
  height: 768px;
  margin: 0px auto 250px auto;
}

.button {
  width: 256px;
  height: 256px;
  border: 1px solid black;
  display: inline-block;
  position: relative;
}
<div id="borovtupo">
  <h1 id="text1">Биография Жмышенка Валерия Альбертовича</h1>
  <a href="https://www.youtube.com/user/GLADIATORPWNZ"><img id="borov" src="https://memepedia.ru/wp-content/uploads/2018/06/unnamed-768x768.jpg" alt="Пажилой боров в свои 54 ГГГГода">
  </a>
  <div class="button">
    <p>тест</p>
  </div>
  <div class="button">
    <p>тест</p>
  </div>
</div>
csshtmlвёрстка

One Answer

Если Вы хотите их разместить на одной линии, тогда вам необходимо взять два элемента в контейнер, например <div>

Причиной проблемы в Вашем случае послужил элемент <a>.
Рекомендации: делайте более структурную верстку, не экономьте на обертках, а также используйте grid, flex;

#text1 {
  color: green;
  text-align: center;
  font-size: 25px;
  font-family: Calibri;
  font-weight: lighter;
}

#borov {
  width: 384px;
  height: 384px;
  position: relative;
  left: 175px;
  border: 1px solid black;
}

#borovtupo {
  width: 768px;
  height: 768px;
  margin: 0px auto 250px auto;
}

.button {
  width: 256px;
  height: 256px;
  border: 1px solid black;
  display: inline-block;
  position: relative;
}
<div id="borovtupo">
  <h1 id="text1">Биография Жмышенка Валерия Альбертовича</h1>
  <a href="https://www.youtube.com/user/GLADIATORPWNZ"><img id="borov" src="https://memepedia.ru/wp-content/uploads/2018/06/unnamed-768x768.jpg" alt="Пажилой боров в свои 54 ГГГГода">
  </a>
  <div>
    <div class="button">
      <p>тест</p>
    </div>
    <div class="button">
      <p>тест</p>
    </div>
  </div>
</div>

Answered by Node_pro on July 22, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP