0

我曾经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>

4

3 回答 3

3

不要position:absolute在每个元素上使用。仅在绝对必要时使用。你可以在这里阅读 -> CSS Position

对于此要求，您可以只使用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>

于 2020-01-31T08:47:07.207 回答
0

Figma 只会为您生成一般样式，例如字体大小、字体粗细、颜色、背景、字母间距等。

对于位置、显示、宽度、高度、填充和其他特定样式，您需要编写代码。

于 2020-02-07T08:03:18.473 回答
0

每个人都是正确的。你不想在 HTML/CSS 中使用 Figma 的绝对定位。

相反，您需要首先了解您需要的结构并弄清楚嵌套和定位。您可以使用网格在 HTML/CSS 中定位元素，它比以前的方法（如表格、浮动等）更现代且工作得更好。

Desech Studio 是一个可以帮助您更快入门的好工具，它可以自动导入您的 Figma 文件并使用网格相对定位元素。你仍然需要在这里和那里做一些调整，但它是一个比绝对零更好的起点。

于 2021-05-14T15:35:12.980 回答