Question 237959 in Html Question posted in
Some basic documentation can be found here.

Html – How to start content with the starting with flex

Hi i want to start my whole content with after player time-code but i’m not able to achieve it

enter image description here

here is my Codepen

here is what i have tried:

.conatiner{
   border: 1px solid #eaeaed;
   padding: 5px 12px;
}

.player-action{
   display: flex;
  align-items:center;
}
<div class="conatiner">
   <div class="player-action">
       <div class="icon">
          <svg data-v-3805f2dc="" xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#01868c" viewBox="0 0 16 16" class="bi bi-play-fill">
                  <path data-v-3805f2dc="" d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
               </svg>
       </div>
      <div class="timestamp">00:12.12 - 00:14.01</div>
   </div>
  <div class="content">
      The National Aeronautics and Space Administration (NASA /ˈnæsə/) is an independent agency of the U.S. federal government responsible for the civil space program, aeronautics research, and space research. Established in 1958, NASA succeeded the National Advisory Committee for Aeronautics (NACA) to give the U.S. space development effort a distinctly civilian orientation, emphasizing peaceful applications in space science.[4][5][6] NASA has since led most American space exploration, including Project Mercury, Project Gemini, the 1968–1972 Apollo Moon landing missions, the Skylab space station, and the Space Shuttle. NASA currently supports the International Space Station and oversees the development of the Orion spacecraft and the Space Launch System for the crewed lunar Artemis program, the Commercial Crew spacecraft, and the planned Lunar Gateway space station.
  </div>
</div>
Tags:

2

Answers


  1. 0 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Player and Content</title>
    <style>
        .container {
            border: 1px solid #eaeaed;
            padding: 5px 12px;
        }

        .player-action {
            display: flex;
            align-items: center;
        }

        .content {
            margin-top: 10px; /* Add margin to separate content from player section */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="player-action">
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#01868c" viewBox="0 0 16 16" class="bi bi-play-fill">
                    <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
                </svg>
            </div>
            <div class="timestamp">00:12.12 - 00:14.01</div>
        </div>
        <div class="content">
            The National Aeronautics and Space Administration (NASA /ˈnæsə/) is an independent agency of the U.S. federal government responsible for the civil space program, aeronautics research, and space research. Established in 1958, NASA succeeded the National Advisory Committee for Aeronautics (NACA) to give the U.S. space development effort a distinctly civilian orientation, emphasizing peaceful applications in space science.[4][5][6] NASA has since led most American space exploration, including Project Mercury, Project Gemini, the 1968–1972 Apollo Moon landing missions, the Skylab space station, and the Space Shuttle. NASA currently supports the International Space Station and oversees the development of the Orion spacecraft and the Space Launch System for the crewed lunar Artemis program, the Commercial Crew spacecraft, and the planned Lunar Gateway space station.
        </div>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Just use .player-action { float: left; }:

    .conatiner {
  border: 1px solid #eaeaed;
  padding: 5px 12px;
  display: flow-root;
  --player-action-height: 32px;
  --content-font-size: 16px;
  --content-line-height: 1.4;
}

.player-action {
  display: flex;
  align-items: center;
  float: left;
  height: var(--player-action-height);
  margin-right: 24px;
}

.content {
  font-size: var(--content-font-size);
  line-height: var(--content-line-height);
  /* vertical center align */
  margin-top: calc(.5 * var(--player-action-height) - .5 * (var(--content-font-size) * var(--content-line-height)));
}
    <div class="conatiner">
   <div class="player-action">
       <div class="icon">
          <svg data-v-3805f2dc="" xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="#01868c" viewBox="0 0 16 16" class="bi bi-play-fill">
                  <path data-v-3805f2dc="" d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
               </svg>
       </div>
      <div class="timestamp">00:12.12 - 00:14.01</div>
   </div>
  <div class="content">
      The National Aeronautics and Space Administration (NASA /ˈnæsə/) is an independent agency of the U.S. federal government responsible for the civil space program, aeronautics research, and space research. Established in 1958, NASA succeeded the National Advisory Committee for Aeronautics (NACA) to give the U.S. space development effort a distinctly civilian orientation, emphasizing peaceful applications in space science.[4][5][6] NASA has since led most American space exploration, including Project Mercury, Project Gemini, the 1968–1972 Apollo Moon landing missions, the Skylab space station, and the Space Shuttle. NASA currently supports the International Space Station and oversees the development of the Orion spacecraft and the Space Launch System for the crewed lunar Artemis program, the Commercial Crew spacecraft, and the planned Lunar Gateway space station.
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search