父div与子div一起显示

时间:2018-04-24 15:10:46

标签: html css

我当前的输出看起来像https://nameserver.com/~user/。我试图弄清楚如何让"一般税务知识(compFamilyHierarchyName类)在蓝色框旁边垂直运行,并像this一样。

我最接近的是将display:flex添加到compFamilyHierarchyName,看起来像this - "一般税务知识"是在正确的地方,但蓝色的盒子现在在同一条线上,我无法弄清楚如何让它们回到彼此之上。

我感谢任何帮助或指示。谢谢!



.outerCompFamilyName{
	width:60px;
	background: #009CDE;
	position: relative;
	border-top: 1px solid white;
}

.innerCompFamilyName{
	color: white;
	position: absolute;
	bottom: 36%;
	left: -30%;
	transform: rotate(-90deg);
}

.whiteCDF {
	background: white;
	padding: 10px;
	border-bottom: 1px solid black; 
	border-right: 1px solid black; 
}

<div class="compFamilyHierarchyName">General Tax Knowledge
    <div style ="display:flex" class="FunctionalExpertise  Credits_Incentives_Methods column"> 
    	
    	<div class="outerCompFamilyName">
    	<div class="innerCompFamilyName" >Accounting Methods and Periods</div>
    	</div>
    	<div id="BuildingProfessionalNetworksTest16" style="width: 95%; background: slategrey;">
    		<div class="whiteCDF">Approaches and participates in all internal/external interactions with professionalism</div><div class="whiteCDF">Actively develops an internal/external network and relationships to grow one’s career, enhance business advisor status with clients, build the practice and serve clients; knows the right people in market/industry</div>
	</div>
    	</div> 
    </div>
    
    <div style ="display:flex" class="FunctionalExpertise  Credits_Incentives_Methods column"> 
    	<div class="outerCompFamilyName">
    	<div class="innerCompFamilyName" >Planning and Consulting</div>
    	</div>
    	<div id="BuildingProfessionalNetworksTest17" style="width: 95%; background: slategrey;">
    		<div class="whiteCDF">Approaches and participates in all internal/external interactions with professionalism</div><div class="whiteCDF">Actively develops an internal/external network and relationships to grow one’s career, enhance business advisor status with clients, build the practice and serve clients; knows the right people in market/industry</div>
	</div>
    	</div> 
    </div>
    </div>
&#13;
&#13;
&#13;

对于上下文 - this是我们尝试为网站重新创建的外观。它是以前广告材料/内部通信的一般组织,因此我们正在尽最大努力重新创建它以保持连续性。

0 个答案:

没有答案