Css не помещается в коробки

Question

Я использовал figma для создания дизайна и экспортировал css код ниже. Я добавил несколько классов div, но они все еще не подходят должным образом.

Я пытался сделать классы подклассом основного класса, но он все еще не работал.

Я предполагал, что это может сработать как это делают столбцы и строки, сначала идут строки, затем следуют столбцы.

.pagingg {
  position: absolute;
  width: 338px;
  height: 61px;
  left: 88px;
  top: 97px;
  background: #FBF6F6;
  border: 1px solid #F8EBEB;
  box-sizing: border-box;
  border-radius: 2px;
}

.pagingg.firstpg {
  position: absolute;
  width: 88px;
  height: 19px;
  left: 104px;
  top: 106px;
  background: #FFFFFF;
  border: 1px solid #E6C3C3;
  border-radius: 2px;
}

.pagingg.pgnum {
  position: absolute;
  width: 58px;
  height: 14px;
  left: 223px;
  top: 110px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 14px;
  /* identical to box height */
  color: #000000;
}

.pagingg.lastpg {
  position: absolute;
  width: 89px;
  height: 16px;
  left: 214px;
  top: 133px;
  background: #FFFFFF;
  border: 1px solid #E6C3C3;
  border-radius: 1px;
}

.nextpg {
  position: absolute;
  width: 88px;
  height: 19px;
  left: 319px;
  top: 106px;
  background: #FFFFFF;
  border: 1px solid #E6C3C3;
  border-radius: 2px;
}

.pagingg.fpg {
  position: absolute;
  width: 22px;
  height: 15px;
  left: 138px;
  top: 106px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 15px;
  /* identical to box height */
  color: #000000;
}

.pagingg.pgnumtext {
  position: absolute;
  width: 58px;
  height: 14px;
  left: 223px;
  top: 110px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 14px;
  /* identical to box height */
  color: #000000;
}

.pagingg.lastpgtext {
  position: absolute;
  width: 21px;
  height: 15px;
  left: 247px;
  top: 133px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 15px;
  /* identical to box height */
  color: #000000;
}

.pagingg.nextpgtext {
  position: absolute;
  width: 26px;
  height: 15px;
  left: 350px;
  top: 107px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 15px;
  /* identical to box height */
  letter-spacing: 0.075em;
  color: #000000;
}

<div class="pagingg">
  <div class="pagingg firstpg">
    First
  </div>
  <div class="pgnum">
    <div class="pgnumtext">2 0f 5</div>
  </div>
  <div class="lastpg">
    <div class="lastpgtext">Last</div>
  </div>
  <div class="nextpg">
    <div class="nextpgtext">Next</div>
  </div>
</div>

Answer 1

Не используйте position:absolute для каждого элемента. Используйте его только тогда, когда это абсолютно необходимо. Вы можете прочитать об этом здесь -> CSS Положение

Для этого требования вы можете просто использовать flexBox, который является рекомендуемым решением для макета.

Читать подробнее о flexbox -> a-guide-to-flexbox или здесь -> MDN Flexbox

См. ниже:

.pagingg {
  display:flex;
  flex-wrap:wrap;
  width: 300px;
  justify-content: space-between;
  align-items: center;
}
.lastpg {
  width: 100%;
  text-align: center;
}
.text {
  border: 1px solid black;
  background-color: grey;
  display:inline-block;
  padding: 5px 20px;
}

<div class="pagingg">
    <div class=" firstpg">
        <div class="firstpgtext text">
        First
        </div>
    </div>
    <div class="pgnum">
        <div class="pgnumtext ">2 0f 5</div>
    </div>
    
    <div class="nextpg">
        <div class="nextpgtext text">Next</div>
    </div>
    <div class="lastpg">
        <div class="lastpgtext text">Last</div>
    </div>
</div>

Answer 2

Figma будет генерировать вам только общие стили, такие как размер шрифта, вес шрифта, цвет, фон, интервал между буквами и т. Д. c.

Для положения, отображения, ширины, высоты, отступов и других Для указания стиля c вам потребуется написать код.