Css 分区'；另一个div中的s不可见

我试图在我的网站上获得一些CSS3效果，我试图做的是：

HTML

<link rel="stylesheet" type="text/css" href="animate.css">
<div class="header">

<div class="header_box1">
<div class="small_header_box">2222222222 </div>
<div class="small_header_box"> 2222222222</div>
<div class="small_header_box">2222222222 </div>
<div class="small_header_box">2222222222 </div>
</div>


<div class="header_box2">
<div class="small_header_box"> 3333333333</div>
<div class="small_header_box"> 3333333333</div>
<div class="small_header_box"> 3333333333</div>
<div class="small_header_box"> 3333333333</div>
</div>


<div class="header_box3">
<div class="small_header_box"> aaaaaaaaa</div>
<div class="small_header_box"> aaaaaaaaa</div>
<div class="small_header_box"> aaaaaaaaa</div>
<div class="small_header_box"> aaaaaaaaa</div>
</div>
</div>

---

我想做的是，三个div在一个不停的动画中，每个div包含四个不同的跳水动作。这里发生的情况是，三个div确实设置了动画，但是标题框（x）div中的四个div不可见。一个div获取所有可用空间，其余三个div不可见。我应该怎么做才能使Header_box1、Header_box2、Header_box3中的所有四个div都可见

对于带有

小标题盒的div，不采用
宽度：50px
和
高度：50px
，而是采用
标题div中的
宽度：100%
和
高度：100%
。如果您将
.header div
更改为更具体的内容，您的问题将得到解决

<div class="header">
 <div class="firstLevel header_box1">
  <div class="small_header_box"></div>
  ... 
 </div>
 ....
</div>

此外，在
标题框1、2和3中只有浮动元素。为了让容器填满适当的空间，您可能需要添加一个清除了float的空元素

<div class="clearFl"></div>

对于带有
小标题盒的div，不采用
宽度：50px
和
高度：50px
，而是采用
标题div的
宽度：100%
和
高度：100%
。如果您将
.header div
更改为更具体的内容，您的问题将得到解决

<div class="header">
 <div class="firstLevel header_box1">
  <div class="small_header_box"></div>
  ... 
 </div>
 ....
</div>

此外，在
标题框1、2和3中只有浮动元素。为了让容器填满适当的空间，您可能需要添加一个清除了float的空元素

<div class="clearFl"></div>

我不确定你到底想做什么，但我认为你代码的这一部分是“一团糟”

至此，u的目标是使用包含“小标题框”的.header类跟随父类的所有div。看看这一部分。
我不确定你到底想做什么，但我认为你代码的这一部分“搞砸了”

至此，u的目标是使用包含“小标题框”的.header类跟随父类的所有div。看看那个部分。
你需要


为div设置一个
高度
，每个div设置4个div，300px=75px
移除
位置：绝对位置或始终从0px开始，即使高度为75px
移除
浮动：左侧，这是无用的（并被
位置：绝对；
覆盖）

移除
高度：100%来自
.header div
规则，否则将“赢”于
小标题框
规则


当然还有其他问题，但作为从代码开始的概念证明（在不完全理解您试图实现的目标的情况下），请看以下内容：

你需要


为div设置一个
高度
，每个div设置4个div，300px=75px
移除
位置：绝对位置或始终从0px开始，即使高度为75px
移除
浮动：左侧，这是无用的（并被
位置：绝对；
覆盖）

移除
高度：100%来自
.header div
规则，否则将“赢”于
小标题框
规则


当然还有其他问题，但作为从代码开始的概念证明（在不完全理解您试图实现的目标的情况下），请看以下内容：

.header div
必须是100%，这就是我想要的。在这个
.header div
中，它们必须是四个（小标题框）div，并且必须可见。如果必须这样做，您将如何执行此操作？by.header div如果您只想选择直接子级，则为所有子级提供一个类并使用.header。。在这里，内部div（小标题框）也获得.header div属性。这就是把你的代码弄乱的原因。我已经更新了我的答案。我还没有试过这个代码。
。header div
必须是100%，这就是我想要的。在这个
.header div
中，它们必须是四个（小标题框）div，并且必须可见。如果必须这样做，您将如何执行此操作？by.header div如果您只想选择直接子级，则为所有子级提供一个类并使用.header。。在这里，内部div（小标题框）也获得.header div属性。这就是把你的代码弄乱的原因。我已经更新了我的答案。我还没有试过这个代码。
.clear{
 clear:both;
}

.header div {  
position: absolute;  
font-family: Tahoma, Arial, sans-serif;  
width: 100%;  
height: 100%;  
margin: 0;  
line-height: 50px;  
text-align: center;  
color: #fff;
text-shadow: 1px 1px 0px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
transform:translateX(100%);
}