小编dip*_*pas的帖子

我尝试calc()使用jQuery animate 设置CSS ,例如:

$element.animate({
    height: 'calc(100% - 30px)'
}, 500);

而且我注意到它calc()不适用于jQuery动画......

我希望有一种方法可以做到这一点,我不希望以类似的方式去做,替代或解决方法,我想设置calc()

这不可能吗？以任何方式？

如果有可能,请告诉我们如何？

我误解了css变量的功能吗？我试图将背景图像URL传递给这样的变量:当我传递像颜色等简单的东西时,它似乎工作得很好......

:root {
  --slide-1: url(/static/images/slideshow/slide1.jpg) ;
  --slide-2: url(/static/images/slideshow/slide2.jpg) ;
  --slide-3: url(/static/images/slideshow/slide3.jpg) ;
  --slide-4: url(/static/images/slideshow/slide4.jpg) ;
  --slide-5: url(/static/images/slideshow/slide5.jpg) ;
}

//and then

.jumbotron > .jumbotron-slideshow:nth-child(1) { 
  background-image: var(--slide-1); 
}

.jumbotron > .jumbotron-slideshow:nth-child(2) {
  animation-delay: 6s;
  background-image: var(--slide-2);
}

.jumbotron > .jumbotron-slideshow:nth-child(3) {
  animation-delay: 12s;
  background-image: var(--slide-3);
}

.jumbotron > .jumbotron-slideshow:nth-child(4) {
  animation-delay: 18s;
  background-image: var(--slide-4);
}

.jumbotron > .jumbotron-slideshow:nth-child(5) {
  animation-delay: 24s;
  background-image: var(--slide-5);
}

是否可以calc()在CSS函数内部使用transform或translate？我似乎无法让它工作.这是一个演示,所以你们可以玩:

http://jsfiddle.net/qdJwY/1/

在研究之后,我确认calc应该适用于ie8 +,但它对我不起作用.

这是我制作的JS小提琴:

http://jsfiddle.net/75tzyLoo/

这是代码:HTML:

<div id="outer">
    <div id="inner">

    </div>
</div>

CSS:

#outer{
    width:400px;
    background-color:black;
    height:200px;
}
#inner{
    width:calc(80%-100px);
    width:expression(80%-100px);
    background-color:red;
    height:100%;

}

这是我看到的输出:

我究竟做错了什么？

我想在容器外显示图像width,填充浏览器的右边缘.

目前我正在使用JavaScript进行此操作,但我感觉并且看起来很笨拙,并且SEO由于缺少ALT标签而不友好,并且当css触发较小屏幕的不同视口设置时也引入问题.

我错过了一个文档章节吗？

我目前的设置:

<div class="container-fluid screen-image" style="background: url('image.png') no-repeat;" data-position-object="screen1">
  <div class="container">
    <div class="col-md-6">
      my content
    </div>
    <div class="col-md-6" id="screen1">
    </div>
  </div>
</div>

Javscript:

$(document).ready(function () {
    setScreenPositions();

    $(window).on('resize', function() {
       setScreenPositions();
    });

    function setScreenPositions() {
        $('.screen-image').each(function() {
            var $this = $(this),
                $positionObject = $('#' + $this.attr('data-position-object'));

            $this.css('background-position', $positionObject.position().left + 'px 60px');
        });
    }
});

为了更好地说明我所追求的内容,我已经将我的Word绘图技巧进行了测试,因为我现在不在我自己的计算机上;)

TL; DRdisplay在我的CSS中更改默认属性是不好的做法吗？

问题

最近,在我们的项目中,我们必须定位2个标头标签,使它们看起来像一个.它们具有相同的字体大小和相似的样式,因此唯一的问题是如何将一个放在另一个旁边.我们有两个不同的想法,并讨论是否是一个改变默认display属性的好习惯

所以,我们非常基本的代码

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

我们希望得到的结果:

标题:我的标题

注意:代码需要包含2个不同的标题,因为在移动版本中我们希望在单独的行中显示它们(因此保留默认值display: block).

方法#1:使用 display: inline

这是非常直接的前进.块元素变为内联,因此它们位于同一行.这种方法的缺点是,两者的默认显示性能h1和h2发生了变化.

方法#2:使用 float

H1可以使用float: left属性定位在左侧.这种方法使默认显示属性保持不变,但如果.container不足以在单行中同时适应两个标题,则需要一些黑客攻击.

这个问题

这一切都导致了一个简单的问题:改变displayHTML元素的默认属性是不是一种坏习惯？是否违反标准,应尽可能避免？或者它是我们的面包和黄油,它并不重要,只要代码在语义上是正确的(所以标题放在h1,文章放在article等...)

col-md-12每个班级我都有两列.

在桌面视图中,它们应显示为:

Col **1** 
Col **2**

在移动视图中,应显示如下:

Col **2**
Col **1**

甚至可以通过Bootstrap的列排序来实现这一点吗？

我目前的代码:

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

我得到约会: {$smarty.now|date_format:'%Y-%m-%d %H:%M:%S'}

但如何获得20天后呢？

如果现在:2010 05 05 12:12:12,我希望表明2010 25 05 12:12:12

有没有办法在css calc函数中使用或实现模运算符？
我知道有mod运算符和IE支持它,但其他浏览器呢？

例如

#element-id{
     width: calc( 100%  mod 5 );
}

我有一个这样的基本设置:

.container {
  border:1px solid green;
}

<div class="container">

  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
  </div>

  <div class="parent">
    <div class="child">
        <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
  </div>

</div>

我想将.childdiv 对齐到右上角.container.我希望在没有 position:fixed或没有margin-top:-px黑客或改变任何HTML的情况下实现这一点.

这种精神错乱可能吗？

jsFiddle进行测试.

到目前为止我尝试过的

1. 我可以设置float:right为.childdiv,但显然,第一个父div高于它.

2. 我可以设置position:absolute的.child …