代码之家 › 专栏 › 技术社区 › Sarmad

尝试创建包含4个单元格的行

scss-mixins sass css

0

Sarmad · 技术社区 · 6 年前

我试图创建一个包含4个单元格的行,但我不知道它为什么不起作用。

我创建了一个家长 row 还有4个孩子。

<div className='row'>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
            </div>

(忽略类的类名,因为我正在使用react)

CSS属性是:

[class^="col-"] {
        float: left;
        &:not(:last-child) {
            margin-right: $gutter-horizontal;
        }  
    }

.col-1-of-4 {
    width: calc((100% - #{$gutter-horizontal}) / 4);
}

它的作用是计算总宽度,然后减去边距,再除以4。从技术上讲,它应该可以工作,我应该能够看到连续4个单元格。但我得到的结果是,一行有3个单元格,下一行有第四个。

结果应该是这样的

hi hi hi hi

但实际结果是

hi hi hi hi

这是工作代码 https://codepen.io/sarmad1995/pen/REYXBV?editors=1100

3 回复 | 直到 6 年前

1

Temani Afif 6 年前

你不应该在你的计算中划分利润。它应该在外部,或者您将删除小于为每个元素设置的边距的内容。你正在设置 X 边缘和仅移除 X/4 所以每个元素都需要 25% - X/4 + X (最后一个 25% - X/4 )因此,总空间为 100% + 2X 哪个比 100% .

.col-1-of-4 {
    width: calc(100% / 4  - #{$gutter-horizontal});
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^="col-"] {
  float: left;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
.row .col-1-of-4 {
  width: calc(100%  / 4 - 6rem);
  background-color: red;
}

<div class='row'>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
  hi
  </div>
</div>

如果你的行为之间需要一个空间(这是你想要的),你可以这样做:

.col-1-of-4 {
    width: calc(100% / 4  - 3*#{$gutter-horizontal}/4);
}

你也可以这样写:

.col-1-of-4 {
     width: calc((100% - 3*#{$gutter-horizontal})/4);
 }

您需要从总宽度中删除3个页边距(为前3个元素定义),然后除以4:

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^="col-"] {
  float: left;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
.row .col-1-of-4 {
  width: calc(100%  / 4 - 3*6rem/4);
  background-color: red;
}

<DIV class='row'>
<DIV class='col-1-of-4'>
你好
&L/DIV & GT;
<DIV class='col-1-of-4'>
你好
&L/DIV & GT;
<DIV class='col-1-of-4'>
你好
&L/DIV & GT;
<DIV class='col-1-of-4'>
你好
&L/DIV & GT;
&L/DIV & GT;

您应该对所有其他类应用相同的逻辑

2

0

Chris Pickford 6 年前

查看您的代码笔示例,您正在设置 margin-right .

[class^="col-"] {
    float: left;
    &:not(:last-child) {
        margin-right: $gutter-horizontal;
    }  
}

删除此项将提供四列,如前所述。

请在以后将所有相关代码包括在您的问题中。

3

-2

Ubaid Iqbal 6 年前

您还可以为此任务使用React Strap库

https://reactstrap.github.io/components/layout/