0

Как расположить кнопки так как на картинке Как

Пробовал как тут не получилось (делал display:block и z-index:10)

HTML

body {
  background-color: #090909;
  margin: 0;
  margin-left: 5%;
  margin-right: 5%;
}

header {
  background-color: #141414;
  box-shadow: -5px 5px 5px 5px #000000;
  height: 100px;
  display: flex;
  justify-content: center;
  font-size: 24px;
  margin: 0;
}

.about_person {
  margin: 0;
  margin-top: 2%;
}

.person_title {}

.personName {
  font-size: 32px;
  font-family: Arial;
  color: #282828;
  margin: 0;
}

.personNickname {
  font-size: 20px;
  color: purple;
  margin: 0;
}

.person_info {
  display: flex;
  justify-content: center;
  margin-top: 1%;
}

.personImg {
  max-width: 40% width:100%;
  max-height: 500px;
  height: 100%;
}

.person_description {
  width: 40%;
  margin: 0;
  margin-left: 1%;
  color: #505050;
  font-size: 24px;
}

.person_description h3 {
  margin: 0;
  margin-bottom: 2%;
}

.person_description p {
  margin: 0;
  margin-bottom: 1%;
}

.person_links {
  position: absolute;
  width: 40%;
  height: 10%;
}

.person_links a {
  padding: 8px 16px 8px 16px;
  margin-left: 20%;
  background-color: #FF00FF;
  border-radius: 16px;
}

.person_links a:hover {
  background-color: #DA70D6;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyFirstSite_copy_4_4</title>
  <link rel="stylesheet" href="style.css">
</head>


<body>

  <header>
    <h2>Professional cs:go players</h2>
  </header>


  <div class="about_person">

    <div class="person_title">
      <h2 class="personName">Alexandr Kostylev</h2>
      <p class="personNickname">s1mple</p>
    </div>

    <div class="person_info">

      <img class="personImg" src="s1mple.jpg" alt="">

      <div class="person_description">
        <h3>About s1mple:</h3>
        <p>s1mple is a steamer and top1 HLTV and also he is the most popular cs:go player in the world</p>
        <p>Age: 25 years</p>
        <p>Team: Natus Vincere</p>
        <p>Role: AWP</p>
      </div>

      <div class="person_links">
        <a href="https://www.hltv.org/stats/players/7998/s1mple">HLTV</a>
        <a href="https://www.youtube.com/channel/UCLyVaqx9Pezekijg0IF7NYA">YouTube</a>
        <a href="https://steamcommunity.com/id/officials1mple/">Steam</a>
      </div>

    </div>

  </div>

</body>




</html>

1 ответ 1

0

positon:absolute и margin-left:0 и margin-top:0 решили проблемму

.person_links {
    position: absolute;
    margin-top: 0.5%;
    margin-left: 80%;
    width: 40%;
    display: inline-block;
}

.person_links a {

padding: 4px 8px 4px 8px;
color:white;
text-decoration: none;
margin-left: 3%;
background-color: #6e006e;
border-radius: 16px;
    font-size: 14px;

}

Материалы:https://youtu.be/heh1N3qltF8?list=PL3LQJkGQtzc5G7wIQfVqBMEprmTKZIaXf&t=2101

1
  • Ничего не решили, я в другом вашем вопросе сделал правильно)) 25 фев в 7:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.