小编Tem*_*fif的帖子

我正在尝试使用CSS重新创建此图像:

我不需要重复.这就是我的开始,但它只是一条直线:

#wave {
  position: absolute;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

<div id="wave"></div>

我有一个CSS 3动画的div在一段时间后滑入.我想要的是几个div来填充滑动的动画div的空间,然后它会将这些元素推向页面.

当我在第一个div处尝试此操作时,即使不可见,滑动仍会占用空间.如果我将div更改为div display:none则根本不会滑入.

在定时进入之前,我如何让div不占用空间(使用CSS作为时间.)

我正在使用Animate.css进行动画制作.

这是代码的样子:

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

如代码所示,我希望隐藏主div,其他div最初显示.然后我有以下延迟设置:

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

正是在这一点上,我希望主要的div能够推动其他div进入.

我该怎么做呢？

注意:我已经考虑过使用jQuery来做这个,但我更喜欢使用严格的CSS,因为它更平滑,时间控制得更好.

编辑

我尝试过Duopixel建议但是我误解了并且没有正确地做到这一点或者它不起作用.这是代码:

HTML

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

CSS

#main-image{
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
#main-image.fadeInDownBig{
    height: 375px;
}

我想E在单词中反映字母,WEBLOG所以我使用了CSS转换属性,但是如果我将文本包装在一个span中,它就不起作用但是如果我在分配display: inline-block;或display: block;

所以变换不适用于内联元素？

示例1(无法转换)

<h1>W<span>E</span>BLOG</h1>

h1 span {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
}

示例2(Works,如果使用display: blockORdisplay: inline-block)

我想知道如何flex-basis: auto & min-width: 0和width: auto计算(width未设置父元素和Flex项目).因此,我确认了W3C的规格.我的理解如下吗？

flex-basis: auto(没有min-width: 0设置父元素的宽度定义)

我将阅读这一部分(7.1.弹性速记).然后我发现用的flex-basis: content是什么时候flex-basis: auto.计算值flex-basis: content似乎在第9章" 柔性布局算法"中描述.

汽车

在flex项上指定时,auto关键字将使用main size属性的值作为使用的flex-basis.如果该值本身是auto,则使用的值是content.

内容

表示基于弹性项目内容的自动大小.(它通常等同于最大内容大小,但通过调整处理宽高比,内部大小限制和正交流;请参阅§9Flex布局算法中的详细信息.)

我已经阅读了第9章.然后我知道有关的条款flex-basis是9.2.3-C线长确定.

如果所使用的柔性基础是内容或取决于其可用空间,和柔性容器被一分钟的内容或MAX-内容约束下的尺寸(例如,执行自动表的布局[CSS21]时),尺寸约束下的项目.flex基本大小是项目的主要大小.

.container {
  display: flex;
  border: 3px solid green;
  overflow-wrap: break-word;
}

.box1 {
  flex-basis: content;
  /* `flex-basis: auto` works the same way */
  border: 3px solid red;
}

<div …

使用CSS flexbox实现网格.例:

此示例中的行数为4,因为我修复了容器宽度以用于演示目的.但是,实际上,它可以根据容器的宽度进行更改(例如,如果用户调整窗口大小).尝试在此示例中调整"输出"窗口的大小以获得感觉.

始终有一个活动项目,标有黑色边框.

使用JavaScript,我允许用户使用左/右箭头导航到上一个/下一个项目.在我的实现中,我只是将活动项的索引减少/增加1.

现在,我想让用户也可以向上/向下导航.为此,我只需要减少/增加活动项目的索引<amount of items in a row>.但是,如果它取决于容器的宽度,我该如何计算这个数？有没有更好的方法来实现上/下功能？

.grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 200px;
  background-color: #ddd;
  padding: 10px 0 0 10px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 0 10px 10px 0;
}

.active.item {
  outline: 5px solid black;
}

<div id="grid" class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div …

我现在正在弄乱一些代码，并使用br标签将2个段落分开。为了使段落之间保持间距，我注意到可以使用边距或填充来完成相同的操作。当我尝试做其他样式（例如添加边框）时，它不起作用。

为什么br标记只能具有某些样式，而不能具有其他样式？我到处搜索，并且阅读了不同的文章/指南，这些文章/指南在如何使用br标签方面相互矛盾。

br {
  padding: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia …

有谁知道如何实现这样的倾斜:

使用CSS的新转换属性？

你可以看到我试图扭转两个角落,任何人都知道这是否可能？

遇到了一个奇怪的CSS问题.有人可以解释为什么有内容的盒子没有垂直对齐？

如果您将文本放在带有类的范围内.divPutTextToFixIssue- 它会正确对齐.

http://jsfiddle.net/KgqJS/88/

   #divBottomHeader {
        background-color: #d5dbe0;
        height: 43px;
    }
    .divAccountPicker {
        display: inline-block;
        background: blue;            
        width: 200px;
        height: 40px;
    }
    .divAccountData {
        display: inline-block;
        background: red;
        width: 400px;
        height: 40px;
    }

<div id="divBottomHeader">
        <div class="divAccountPicker">
           <span class="divPutTextToFixIssue"></span>                 
        </div>
        <div class="divAccountData">
            <span>Balance: $555</span>
        </div>
    </div>

情况如下:

body {
  margin: 0;
  background: pink;
  color: #fff;
}

.box {
  margin-top: 20px;
  background: red;
}

.bottom {
  text-align: right;
  background: green;
  animation: animate 2s infinite alternate linear;
}

@keyframes animate {
  from {
    margin-top: 10px;
  }
  to {
    margin-top: -40px;
  }
}

<div class="box">
  some content
</div>
<div class="bottom">
  other content
</div>

发生了什么？

正如您所看到的,我们有两个div没有任何复杂样式(简单的背景颜色).我div通过应用否定来使第二个与第一个重叠margin-top.我期待看到一个完全重叠另一个,但事实并非如此.第二个div是在第一个内容和背景之间滑动,对我来说这是一个奇怪的行为.

这里的动画无关,我只是用它来更好地展示行为.我们可以简单地添加负边距而不用动画,我们会有同样的事情:

body {
  margin: 0;
  background: pink;
  color: #fff;
}

.box { …

考虑以下示例......

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
}

<div class="parent">
	<div class="child">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget …