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>  

在这里提琴：https://jsfiddle.net/smvbaa6u/

Answer 1

您已将 font-size: 0 设置为 tribeactivity - 将其重置为 initial 以获得 tribeconversation - 请参见下面的演示：

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

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

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

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

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

Answer 2

div .tribeconvo 从 #tribeactivity 继承 font-size:0;。

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

因此，.tribeconversation div 有一个 height:0 并且不会出现。只需将大于 0 的字体大小添加到 .tribeconvo 即可解决此问题。

.tribeconvo{
    font-size: 16px;
}