Divが表示されない - cssの問題

Question

私は以下のコードで、下部が表示されず、その理由が分かりません。

<div class="tribeconversation"> 
     <div class="tribeconvo">Joeyc: hey everyone</div> 
     <div class="tribeconvo">JakeP97: hello joey</div> 
     <div class="tribeconvo">Joeyc: oi m8, whats up</div> 
     <div class="tribeconvo">TheKid: LOL hey JakeP</div> 
     <div class="tribeconvo">Joeyc: RIP</div> 
</div> 

フィドルここ：

この

は表示されません一部であり、あなたは font-size: 0 tribeactivityに設定した https://jsfiddle.net/smvbaa6u/

Answer 1

からtribeconversationためinitialにリセット - デモ下記参照：

#tribeactivity { 
 
\t text-align: center; 
 
\t font-size: 0; 
 
} \t 
 
\t 
 
#Amuraheader { 
 
\t font-family: 'survival'; 
 
\t font-size: 80px; 
 
\t text-align: center; 
 
\t color: #2B32E4; 
 
\t text-shadow: 3px 3px 1px #ffffff; 
 
} 
 
\t 
 
#Malosiheader { 
 
\t font-family: 'survival'; 
 
\t font-size: 80px; 
 
\t text-align: center; 
 
\t color: #DB282B; 
 
\t text-shadow: 3px 3px 1px #ffffff; 
 
\t margin-top: 30px; 
 
} \t 
 

 
.tribeavi { 
 
\t width: 149px; 
 
\t height: 186px; 
 
\t background-size: cover; 
 
\t display: inline-block; 
 
} \t 
 

 
.tribeaviname { 
 
\t font-size: 18px; 
 
\t font-family: 'survival'; 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t height: 27px; 
 
\t padding-top: 3px; 
 
\t top: 156px; 
 
\t position: relative; 
 
\t background-color: rgba(0,0,0,0.7); 
 
    color: white; 
 
} \t 
 

 
.tribeconversation { 
 
\t display: inline-block; 
 
    font-size: initial; 
 
}

<div id="tribeactivity"> 
 
    \t <div id="Amuraheader">Amura</div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Riku1274-14154.png?v=2053856125')"> 
 
    \t \t <div class="tribeaviname">Riku1274</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/realityobsessed-7881.png?v=625345208')"> 
 
    \t \t <div class="tribeaviname">Reality</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://www.zwooper.com/media/avatars/johnnyscott1127-7443.png?v=590056866')"> 
 
    \t \t <div class="tribeaviname">Johnny</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/exploremedora-7274.png?v=1507280925')"> 
 
    \t \t <div class="tribeaviname">ExploreMe</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/yswimmer96-1356.png?v=386446076')"> 
 
    \t \t <div class="tribeaviname">Yswimmer</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/xStqqd-16258.png?v=173536863')"> 
 
    \t \t <div class="tribeaviname">xStqqd</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/AngelOfWater-885.png?v=430260016')"> 
 
    \t \t <div class="tribeaviname">Angelofwater</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/a07strand-9696.png?v=259628760')"> 
 
    \t \t <div class="tribeaviname">A07Strand</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/JakeP97-3100.png?v=529092857')"> 
 
    \t \t <div class="tribeaviname">JakeP97</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/joeyc-13212.png?v=101411917')"> 
 
    \t \t <div class="tribeaviname">JoeyC</div> 
 
    \t </div> 
 
    \t  \t 
 
    \t 
 
    \t 
 
    \t <div id="Malosiheader">Malosi</div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/SuperDoodle-2870.png?v=1868660820')"> 
 
    \t \t <div class="tribeaviname">SuperDoodle</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/wwxcrunner1-1056.png?v=48014610')"> 
 
    \t \t <div class="tribeaviname">wwxcrunner</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/King_Canine-10700.png?v=327204573')"> 
 
    \t \t <div class="tribeaviname">King_Canine</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/WILLZ14-8313.png?v=620214729')"> 
 
    \t \t <div class="tribeaviname">Willz14</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/BostonRob524-7935.png?v=1279836291')"> 
 
    \t \t <div class="tribeaviname">BostonRob</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/devon19-10680.png?v=168166820')"> 
 
    \t \t <div class="tribeaviname">Devon19</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Alvarovidalpuga-8630.png?v=1796517703')"> 
 
    \t \t <div class="tribeaviname">Alvaro</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/Ginger7-4349.png?v=564697580')"> 
 
    \t \t <div class="tribeaviname">Ginger7</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/TheKid-22456.png?v=626667976')"> 
 
    \t \t <div class="tribeaviname">TheKid</div> 
 
    \t </div> 
 
    \t <div class="tribeavi" style="background-image: url('http://zwooper.com/media/avatars/joeyc-13212.png?v=101411917')"> 
 
    \t \t <div class="tribeaviname">Krystiian</div> 
 
    \t </div> 
 
    \t 
 
    \t <div class="tribeconversation"> 
 
\t \t \t <div class="tribeconvo">Joeyc: hey everyone</div> 
 
\t \t \t <div class="tribeconvo">JakeP97: hello joey</div> 
 
\t \t \t <div class="tribeconvo">Joeyc: oi m8, whats up</div> 
 
\t \t \t <div class="tribeconvo">TheKid: LOL hey JakeP</div> 
 
\t \t \t <div class="tribeconvo">Joeyc: RIP</div> 
 
\t \t </div> \t 
 
    </div>

Answer 2

.tribeconvoはfont-size:0;を#tribeactivityから継承しています。

#tribeactivity { 
    text-align: center; 
    font-size: 0; 
} 

したがって、.tribeconversation divがheight:0を持っており、表示されません。これを修正するには、0より大きいフォントサイズを.tribeconvoに追加してください。

.tribeconvo{ 
    font-size: 16px; 
}