标签: css-calc

IE11似乎没有计算calc(50% - 1rem),但所有其他浏览器都可以.

我该如何解决？

我创建了两个表,我想width根据第一个列的大小设置正确的3列.我试过calc((100% - 200px)/3)但它并不适用于所有浏览器:Firefox 40失败,IE11失败,Chrome 44似乎做得对.我该怎么做才能calc()在所有浏览器中理解？或者我应该忘记它？

我创建了一个更简单的版本,但也失败了.

<table class="tableauTable">
<thead>
    <tr class="tableauRow first">
        <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th>
    </tr>
</thead>
<tfoot>
    <tr class="tableauRow first">
        <th colspan="3" header="" class="tableauCell first"></th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span>
        </th>
        <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span>
        </th> …

可以在calc表达式中使用n变量吗？

例如：

.child:nth-child(n) {
   margin-left: calc(n * 46px);
}

我的代码：

<div class="share-buttons">
  <div class="share-button-main"></div>
  <div class="share-button share-facebook">
    <img src="facebook.png" alt="" />
  </div>
  <div class="share-button share-whatsapp">
    <img src="whatsapp.png" alt="" />
  </div>
  <div class="share-button share-email">
    <img src="email.png" alt="" />
  </div>
  <div class="share-button share-sms">
    <img src="sms.png" alt="" />
  </div>
</div>

CSS（Sass）：

.share-buttons {
  position: relative;
    display: flex;

  .share-button-main {
    width: 46px;
    height: 46px;
    z-index: 2;
    cursor: pointer;
    content: url('share-menu-share-closed.png')
  }

  .share-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    z-index: …

在 flexbox 中，当我使用justify-content:space-between第一个和最后一个项目时，它们与 flex 容器的边界完全对齐，其中空间在它们之间划分。如何将第一个项目向右对齐，而其他项目也向右对齐（而不是整个宽度）？

下面的示例代码不好，因为当我使用时flex-end，我必须为项目设置边距，因此每行中的第一个不粘在右边。

#flexcontainer{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  background:#ff8800;
}


.flexitem{
	display: -webkit-flex;
	display: flex;
	margin:20px;
	width:24%;
	background:#666666;
	box-sizing:border-box;
    height:50px;

}

<div id="flexcontainer">
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
</div>

这也不好，因为项目没有右对齐（而是整个宽度）：

#flexcontainer{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background:#ff8800;

}


.flexitem{
	display: -webkit-flex;
	display: flex; …

我试图用它calc来固定我的宽度th:last-child与其他宽度相差15px.我所做的是:

th:last-child {
   width: calc( (100% - 30px)/12 + 30px );
}
table, tr {
width:100%;
border: 1px solid black;
height:10px;
}
th {
  border-right: 1px solid black;
  width: calc( (100% - 30px)/12 );
}

<table>
<thead>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <th>Column 5</th>
    <th>Column 6</th>
    <th>Column 7</th>
    <th>Column 8</th>
    <th>Column 9</th>
    <th>Column 10</th>
    <th>Column 11</th>
    <th>Column 12</th>
  </tr>
</thead>
<tbody>
 <tr>
    <td>Row 1</td>
    <td>Row 2</td>
    <td>Row 3</td>
    <td>Row 4</td>
    <td>Row 5</td> …

是否可以在CSS中使用calc()函数来操作十六进制颜色值？在下面的CSS片段中,我想使用--enable变量在MyBtnStyle的background-color属性的两个十六进制颜色值之间切换:-- enable -color和--disable-color.当使用rgb(r,g,b)颜色格式时,可以使用calc()计算每个颜色分量,但我更喜欢直接在十六进制颜色值之间切换.

    :root {
        --enable: 0;
        --disable-color: #ff0000;
        --disable-r: 255;
        --disable-g: 0;
        --disable-b: 0;
        --enable-color: #00ff00;
        --enable-r: 0;
        --enable-g: 255;
        --enable-b: 0;
    }

    .MyBtnStyle {
        width: 100%;
        height: 100%;
        text-align: center;
        border: 2px;
        margin: 1px 1px;
        color: black;
        padding: 1px 1px;
        background-color: calc(var(--enable-color)*var(--enable) + var(--disable-color)*(1 - var(--enable))); 
    }

/* this works */
    /* rgb( calc(var(--enable-r)*var(--enable) + var(--disable-r)*(1 - var(--enable)) ), 
            calc(var(--enable-g)*var(--enable) + var(--disable-g)*(1 - var(--enable)) ), 
            calc(var(--enable-b)*var(--enable) + var(--disable-b)*(1 - var(--enable)) )) */

我之前开始使用 SASS（具体来说是 scss）并且想知道 css calc() 方法或 sass 计算之间是否有任何区别/优势/劣势？

$divide-by: 50;

//CSS calc()
.example1 {
  height: calc(100vw / #{$divide-by});
}

//SASS calculation
.example2 {
  height: 100vw / $divide-by;
}

我calc()用来top:在类中设置属性。我需要一些帮助来了解如何calc()使用-我认为两个方程应该具有相同的结果，但不会相同。（最主要的方程式不切实际，我只是想调试一个更大的问题，注意到这两个结果不一样）

calc(-10px + ((1 - 1) * 0));

calc(-10px);

我正在使用css-tricks 中的 css calc 函数

calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

我像这样使用 calc 函数

margin-top: calc(270px + (0 - 270) * (100vw - 320px) / (900 - 320));

这margin-right是可行的，我的视口宽度为 320 像素时为 270 像素，视口宽度为 900 像素时为 0 像素。但是当我将窗口大小调整为大于 时900px，结果margin-right为负。

我可以使用媒体查询，但是还有其他 CSS 解决方案吗？我可以将这些计算函数与min() max()或clamp()避免负值结合起来吗？

编辑

我找到了一个可能的解决方案。max()它以这种方式工作

margin-right: max(0vw, calc(270px + (0 - 270) …

我想计算网格模板中使用的行数calc(),但是尝试repeat使用除法计数是不行的:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.grid>div {
  background: tomato;
  width: 20px;
  text-align: center;
  margin: auto;
}

.grid.no-calc {
  grid-template-rows: repeat(3, 30px);
}

.grid.addition {
  grid-template-rows: repeat(calc(1 + 2), 30px);
}

.grid.subtraction {
  grid-template-rows: repeat(calc(4 - 1), 30px);
}

.grid.multiplication {
  grid-template-rows: repeat(calc(3 * 1), 30px);
}

.grid.division {
  grid-template-rows: repeat(calc(6 / 2), 30px);
}

<p>Top 4 have their row heights set correctly</p>

<div class="grid …