小编dip*_*pas的帖子

在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

它是如何以及为什么有效？

我正在尝试calc()在Sass样式表中使用该函数,但我遇到了一些问题.这是我的代码:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

如果我使用文字50px而不是我的body_padding变量,我会得到我想要的.但是,当我切换到变量时,这是输出:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

我怎样才能让Sass认识到它需要替换calc函数中的变量？

现在我在我的LESS代码中尝试在CSS3中执行此操作:

width: calc(100% - 200px);

但是,当LESS编译时,它输出:

width: calc(-100%);

有没有办法告诉LESS不要以这种方式编译并正常输出？

我知道如何让2个div并排浮动,只需向左浮动一个,向右浮动另一个.

但是如何使用3个div进行此操作还是应该只为此目的使用表格？

我试图使用CSS动态更改div的宽度,而不是jquery.以下代码适用于以下浏览器:http://caniuse.com/calc

/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);

我也想支持IE 5.5及更高版本,我发现以下内容:表达式.这是正确的用法:

/* IE-OLD */
width: expression(100% - 500px);

我还可以支持Opera和Android浏览器吗？

我们可以定义min-margin和max-margin,max-padding并min-padding在CSS？

最近我在接受采访时被问到这个问题.

 var a = 1;
 var b = [1];

什么会a == b;回来.

当我在我的Chrome浏览器控制台上检查时,我得到了这个.

var a = 1;
var b = [1];
a == b;
true

我也检查过了

var a = 1;
var b =(1);
a == b;
true

我知道b在大小为1的数组中.这是否意味着数组的大小被分配给b.我真的很困惑.任何人都可以解释我的逻辑吗？

我在许多论坛上看到,在测试版本的bootstrap 4之后,select和multiselect的问题已得到解决.

不幸的是,我无法像(bootstrap 3)中的(bootstrap 3)那样显示多选.

Bootstrap 3代码段

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Bootstrap 4片段

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

我想知道我是否可以将calc()函数与attr()函数结合起来,以实现如下所示:

<div class="content" data-x="1">
    This box should have a width of 100px
</div>

<div class="content" data-x="2">
    This box should have a width of 200px
</div>

<div class="content" data-x="3">
    This box should have a width of 300px
</div>

CSS

.content{
    //Fallback. If no calc is supported, just leave it at 100px
    width: 100px;
}


.content[data-x]{
    // Multiply the width of the element by the factor of data-x
    width: calc(100px * attr(data-x));
}

该草案说,它应该工作,但对我来说器(Chrome 31.0.1650.63 m和火狐25.0.1),它没有.那么有两种情况:

1. 我做错了
2. 它尚不支持

这是怎么回事？

示例小提琴

想象一下,我有以下标记

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

和风格

.item {
  width: 100%
}

并且由于某些原因我无法改变宽度我可以 .item 通过.container使用flexbox或任何其他方式设置父容器,在每行中排列2个项目吗？