css - 別の div 内の div が表示されない

Question

私は自分のサイトでいくつかの 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>

CSS

.header_box1{
 background-color: red;  
}

.header_box2{
 background-color: skyblue;  
}

.header_box3{
 background-color: yellow;  
}
.small_header_box{
 background-color: green;  
   width: 50px;  
    height: 50px; 

    float: left;
}


.header {  
    width: 1000px;  
    height: 300px;  
    margin: 25px auto;  
    overflow: hidden;  
    position: relative;  
    border: 1px solid #000;  
    margin: 25px auto;    

    background-color: #222;  

  -webkit-border-radius: 5px;  
  border-radius: 5px;  

  -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);  
  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);  
}  


   .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%);  
}  

@keyframes left-one {  
    0%  {  
        transform:translateX(100%);  
    }  
    3% {  
        transform:translateX(0);  
    }  
    30% {  
        transform:translateX(0);  
    }  
    31% {  
        transform:translateX(-100%);  
    }  
    99%{  
        transform:translateX(-100%);  
    }  
    100%{  
        transform:translateX(-100%);  
    }  
}  
@keyframes left-two {  
    0% {  
        transform:translateX(100%);  
    }  
    33% {  
        transform:translateX(100%);  
    }  
    34% {  
        transform:translateX(0);          
    }  
    66% {  
        transform:translateX(0);          
    }  
    67%{  
        transform:translateX(-100%);  
    }  
    100%{  
        transform:translateX(-100%);  
    }  
} 
@keyframes left-three {  
    0% {  
        transform:translateX(100%);  
    }  
    67% {  
        transform:translateX(100%);  
    }  
    68% {  
        transform:translateX(0);          
    }  
    98% {  
        transform:translateX(0);          
    }  
    99%{  
        transform:translateX(-100%);  
    }  
    100%{  
        transform:translateX(-100%);  
    }  
}  

.header div:nth-child(1) {  
    animation: left-one 15s ease infinite;  
}  
.header div:nth-child(2) {  
    animation: left-two 15s ease infinite;  
}  
.header div:nth-child(3) {  
    animation: left-three 15s ease infinite;  
}

私がやりたいことは、3 つの div がノンストップアニメーションであり、各 div に 4 つの異なるダイブが含まれていることです。ここで何が起こるかというと、3 つの Div はアニメーション化されますが、header_box(x) div 内の 4 つの div は表示されません。1 つの div が使用可能なすべてのスペースを取得し、残りの 3 つの div は表示されません。Header_box1、Header_box2、Header_box3 内の 4 つの div すべてが表示されるようにするにはどうすればよいですか。

score 1 · Accepted Answer

必要がある

div に an を設定heightします。300px の 4 つの div = 各 div の 75px;
削除position: absolute;しないと、height: 75px であっても、常に 0px から開始されます。
remove float: left;、それは役に立たない (およびによってオーバーライドされるposition: absolute;)
そうheight: 100%; し.header divないと、ルールに対して「勝つ」ことになります.small_header_box。

もちろん他にも問題はありますが、コードから始める概念実証として (何を達成しようとしているのかを正確に理解することなく)、これを見てください:

http://jsfiddle.net/nuUm6/

score 0 · Accepted Answer

何を作ろうとしているのか正確にはわかりませんが、コードのこの部分は「めちゃくちゃ」だと思います。

.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%);
}

これにより、「小さなヘッダーボックス」を含む .header クラスを持つ親に続くすべての div をターゲットにしています。その部分を見てください。

score 0 · Accepted Answer

div の with class のsmall_header_box場合、width:50pxandheight:50pxは取得されず、代わりにwidth:100%and height:100%from.header divが取得されます。.header divより具体的なものに変更すると、問題は解決します。

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

そしてcssで

.header .firstLevel{
    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%);
    -webkit-transform:translateX(100%);
}

header_box1また、 ,2 &3内にはフローティング要素しかありません。コンテナーが適切なスペースを埋めるために、float がクリアされた空の要素を追加することができます。

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

とcss

.clear{
 clear:both;
}

css - 別の div 内の div が表示されない

3 に答える 3

Related

Reference