Выравнивание элемента вправо в css

Я хочу выровнять agoкласс по правой стороне родительского div (cardclass).

Но float: rightне работает 🙁

Вот фрагмент кода этого:

.card{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 80%;

  max-height: 700px;
}
.card:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container{
  position: relative;
  padding: 2px 16px;
}
.circled-dp{
  width: 40px;
  height: 40px;

}
.meta-info{
  box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.2);
  padding: 2px;
  display: inline-flex;

}
.name-card{
  margin-bottom: -9px;
  position: relative;
  margin-top: 10px;
  padding-left: 2px;
}
.meta-info p{
  margin-bottom: -9px;
  position: relative;
  margin-top: 10px;
  padding-left: 6px;
}
.ago{

}
<!DOCTYPE html>
<html>

<head>
    <title>Card</title>
    <link rel="stylesheet" href="card.css">
</head>

<body>
    <div class="card">
      <div class="meta-info">
      <img class="circled-dp" src="https://inomics.com/sites/default/files/pictures/picture-95970-1460131169.png">
      <h4 class="name-card">Someone</h4>
      <p> asked a question </p>
      <div class="ago">
      <p >1 sec ago</p>
    </div>
      </div>
        <img src="https://material-design.storage.googleapis.com/publish/material_v_4/social.png" style="width:100%;">
         <div class="container">
        <h4><b>Someone</b></h4>
        <p> Question is here</p>
    </div>
    </div>

</body>

</html>

Спасибо за помощь.

1 ответ

  1. Вам просто нужно внести несколько небольших изменений в ваш код

    1) С тех пор , как вы использовалиinline-flex, meta-infodiv принимает только ширину его содержимого и не всю ширину его контейнера. Поэтому используйте display: flex;вместо этого, чтобы занять всю ширину строки.

    2) Далее по горизонтали выравниваем только то .agoвправо . Вы делаете это с помощью flex by margin-left: auto;

    .card{
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      width: 80%;
    
      max-height: 700px;
    }
    .card:hover{
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
    .container{
      position: relative;
      padding: 2px 16px;
    }
    .circled-dp{
      width: 40px;
      height: 40px;
    
    }
    .meta-info{
      box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.2);
      padding: 2px;
      display: flex;
    
    }
    .name-card{
      margin-bottom: -9px;
      position: relative;
      margin-top: 10px;
      padding-left: 2px;
    }
    .meta-info p{
      margin-bottom: -9px;
      position: relative;
      margin-top: 10px;
      padding-left: 6px;
    }
    .ago{
      margin-left: auto;
    }
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Card</title>
        <link rel="stylesheet" href="card.css">
    </head>
    
    <body>
        <div class="card">
          <div class="meta-info">
          <img class="circled-dp" src="https://inomics.com/sites/default/files/pictures/picture-95970-1460131169.png">
          <h4 class="name-card">Someone</h4>
          <p> asked a question </p>
          <div class="ago">
            <p>1 sec ago</p>
          </div>
          </div>
            <img src="https://material-design.storage.googleapis.com/publish/material_v_4/social.png" style="width:100%;">
             <div class="container">
                <h4><b>Someone</b></h4>
                <p> Question is here</p>
            </div>
        </div>
    </body>
    
    </html>