小编Pau*_*lCo的帖子

我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.

我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).

这是一个示例代码段:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

以下是我希望从上面的代码段中获得的内容

我有一个#text内部弯曲,#container并希望绝对定位在它下面的东西:

如何计算兄弟姐妹的弹性定位？

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}

<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate …

滚动固定

我创建了一个绝对定位在文档中的徽标元素,当我滚动它时,它会固定在窗口顶部并具有固定位置(例如:https://jsfiddle.net/swzbe9cv/2)

JavaScript的

  window.addEventListener('scroll', fixLogo);
  function fixLogo(){
    if(window.scrollY >= trigger){
      if(!logo.classList.contains('fixed')){
        logo.classList.add('fixed');
      }
    } else{
      if(logo.classList.contains('fixed') && !nav.classList.contains('show')){
        logo.classList.remove('fixed');
      }
    }
  }

CSS

.logo {
  position: absolute;
  top: calc(100% + 15px);
  height: 40px;
  width: 100px;
}

.fixed {
  position: fixed;
  top: 15px;
}

随着菜单出现

然后我决定在左侧添加一个菜单,通过点击徽标元素显示/隐藏.这个菜单有一个固定的位置,标志显示在它上面.(例如:https://jsfiddle.net/6cskthuz/2/) JavaScript

  logo.addEventListener('click',showMenu);
  function showMenu(){
    if(nav.classList.contains('show')){
      if(window.scrollY < pageheight && logo.classList.contains('fixed')){
        logo.classList.remove('fixed');
      }
      nav.classList.remove('show');
    } else {
      if(!logo.classList.contains('fixed')){
        logo.classList.add('fixed');
      }
      nav.classList.add('show');
    }
  }

CSS

nav {
  z-index:1;
  position: …

我开始EventTarget通过添加一些有用的东西来扩展接口，prototypes但是随后我在Safari 8上对其进行了测试并得到：

[Error] ReferenceError: Can't find variable: EventTarget

我在MDN上发现Safari浏览器“ window.EventTarget不存在”。

这个问题看起来确实很有趣，但它与IE8有关。

因此，我想知道是否可以在Safari上访问对EventTarget接口的引用，或者是一种解决方法，可以使用类似的代码EventTarget.prototype.hasEventListener并且EventTarget.prototype.hasEventListener在Safari上没有出现任何错误？

编辑 我发现一个有趣的提交，说它是在15年9月12日实现的（从时间戳记起），但是它肯定在Safari 9.1中不起作用

基于上一个问题,我正在尝试为我的网格布局添加更大的块.在最后一个问题中,我需要一个div跨度多行.现在的问题是我需要一个div来跨越多个行和列.

如果我有一个五行元素,我怎么能在它的中间放置更大的元素？(因为float它自然而然地放在一边).

这是一个示例代码段:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}
.larger{
  height: 110px;
  width: 190px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我不想display: grid用于包装元素,因为我可以使用 状态这是一个非常先进的技术.我希望有一个非网格,非表格解决方案.

以下是我希望从上面的代码段中获得的内容

我想使用我自己的变量配置Bootstrap 4 的 Sass 文件，然后能够导入其他 sass 文件中所有 Bootstrap 的配置成员（并使用 WebPack :export{}magic）。

我通常会声明我的变量，然后@import "~bootstrap/scss/bootstrap"在其中添加一个，如下所示：

$primary: #eee;\n$body-color: $primary;\n@import "~bootstrap/scss/bootstrap";\n:export{ primary: $primary; body-color: $body-color;}\n

但正如Sass 文档提到的：

\n

Sass 团队不鼓励继续使用 @import 规则。Sass 将在未来几年内逐步淘汰它，并最终将其从语言中完全删除。更喜欢 @use 规则。

\n

@与()一起使用：

标记为@use的变量可以!default通过添加来覆盖with ($variable: value) ，但您必须@use在文件顶部编写指令（在声明可以配置它的任何变量之前）。我能接受的最好的办法是：

@use "~bootstrap/scss/bootstrap" with (primary: #eee, body-color: #eee);\n:export{ primary: bootstrap.$primary; body-color: bootstrap.$body-color;}\n

非常简单，但我无法在配置的变量之间共享值，并且 Bootstrap 的成员不会从文件中导出！（#eee我希望它们共享一个保存该值的变量，而不是声明多个变量）。 …

我想通过 bash 脚本测试文件或目录是否存在：

    if [ -f "$file" -o -d "$file" ]; then
        # Do things
    fi

但此测试不适用于应用程序文件（.app），我在测试手册页上找不到答案，并且认为 .app 被视为 osx 上的文件夹。

我用来创建Date使用第四语法对象从MDN如new Date(year, month, day, hours, minutes, seconds, milliseconds);但后来我试图设置一个Date对象，只有一年（作为new Date(2017)），但你能指望它被视为一个value，并认为今年的毫秒数。

有什么方法可以仍然容易地按原样使用年份而不更改语法并期望正确设置Date？