Css 不适合盒子中的盒子答案

【问题标题】：Css doesn't fit boxes in a boxCss 不适合盒子中的盒子
【发布时间】：2020-05-16 22:00:12
【问题描述】：

我使用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>

【问题讨论】：

你应该重新考虑所有的布局。在每个元素上使用position: absolute 不是一个好主意。您也可以更改 HTML 吗？还是 HTML 结构应该和你写的一样？

标签： html css figma

【解决方案1】：

不要在每个元素上都使用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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：