Выравнивание заголовков разных блоков

131

21 мая 2021, 15:10

Как сделать,чтобы при увеличении размера заголовка, текст не выходил за красную зону снизу и оставался на одной линии с другими заголовками ? (В коде я прописал свойства для row, т.к. здесь классы bootstrap-а не пашут).

.contacts p{ 
	margin-bottom: 0; 
	padding-bottom: 9px; 
} 
 
.contacts__title{ 
	text-transform: uppercase; 
	font-size: 22px; 
	color: #0f5f5c; 
	font-weight: bold; 
} 
 
.contacts__email{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 13px; 
	color: #0f5f5c; 
	font-weight: bold; 
} 
 
.contacts__phone{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 13px; 
	color: #83a7a5; 
} 
 
.contacts__address{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 13px; 
	color: #83a7a5; 
	width: 188px; 
} 
 
.footer__item p{ 
	margin-bottom: 0; 
	padding-bottom: 9px; 
} 
 
.item__title{ 
	font-family: 'Roboto', sans-serif; 
	font-weight: bold; 
	font-size: 13px; 
	color: #0f5f5c; 
 
} 
 
.item__selection{ 
	font-family: 'Roboto', sans-serif; 
	font-size: 13px; 
	color: #83a7a5; 
} 
 
.item__selection:hover{ 
	text-decoration: none; 
	color: #83a7a5; 
} 
 
.row{ 
  display:flex; 
  justify-content:center; 
} 
 
.footer__item{ 
  margin-left:100px; 
}

<div class="row"> 
<div class="col-lg-3 col-md-3 col-sm-4"> 
            <div class="contacts"> 
              <h3 class="contacts__title">sharik</h3> 
              <p class="contacts__email">@: hi@sharik.com</p> 
              <p class="contacts__phone">p: +62 200 580 0117</p> 
              <p class="contacts__address">a: 601 Overlook Circle Suite 290 
              Kalam, MI 49009</p> 
            </div> 
          </div> 
          <div class="col-lg-3 col-md-3 col-sm-4"> 
            <div class="footer__item"> 
              <h3 class="item__title">Company</h3> 
              <p><a href="#" class="item__selection">Home</a></p> 
              <p><a href="#" class="item__selection">About Us</a></p> 
              <p><a href="#" class="item__selection">Pricing</a></p> 
              <p><a href="#" class="item__selection">Contact Us</a></p> 
            </div> 
          </div> 
          <div class="col-lg-3 col-md-3 col-sm-4"> 
            <div class="footer__item"> 
              <h3 class="item__title">Others</h3> 
              <p><a href="#" class="item__selection">Help & Support</a></p> 
              <p><a href="#" class="item__selection">Privacy Policy</a></p> 
              <p><a href="#" class="item__selection">Terms</a></p> 
              <p><a href="#" class="item__selection">Sitemap</a></p> 
            </div> 
            </div>

Answer 1

Не применял Bootstrap чего и Вам желаю

В общем обнулил все margin и padding у заголовков и так же (плохая практика) уменьшил высоту линии у тега h3

Для проверки поставил псевдоэлемент с 1px высотой, по которой выравнивал заголовки второго и третьего уровня

Если что то не так скажите - по любому достигнем нужного результата

html, 
body, 
.items, 
.item, 
h2, 
h3, 
p, 
a { 
  margin: 0; 
  padding: 0; 
} 
 
a { 
  display: block; 
} 
 
h2, 
h3 { 
  text-transform: uppercase; 
} 
 
h3 { 
  display: inline-block; 
  vertical-align: bottom; 
  line-height: 0.5; 
} 
 
.items { 
  display: flex; 
  justify-content: space-around; 
  padding: 30px 0; 
  position: relative; 
} 
 
.items:after { 
  content: ""; 
  position: absolute; 
  top: 44px; 
  left: 0; 
  width: 100%; 
  height: 1px; 
  background: red; 
} 
 
p, 
a { 
  padding: 6px 0; 
}

<div class="items"> 
  <div class="item"> 
    <h2>sharik</h2> 
    <div style="margin-top: 3px;"> 
      <p>@: hi@sharik.com</p> 
      <p>p: +62 200 580 0117</p> 
      <p>a: 601 Overlook Circle Suite 290<br> Kalam, MI 49009</p> 
    </div> 
  </div> 
  <div class="item"> 
    <h3>Company</h3> 
    <div style="margin-top: 12px;"> 
      <a href="">Home</a> 
      <a href="">About Us</a> 
      <a href="">Pricing</a> 
      <a href="">Contact Us</a> 
    </div> 
  </div> 
  <div class="item"> 
    <h3>Others</h3> 
    <div style="margin-top: 12px;"> 
      <a href="">Help & Support</a> 
      <a href="">Privacy Policy</a> 
      <a href="">Terms</a> 
      <a href="">Sitemap</a> 
    </div> 
  </div> 
</div>