垂直中文文本项目在标签旁边浮动

Question

通常它使用float left来使第二个div浮动到第一个div旁边，这是我的情况：

.group-header-tags {
    writing-mode:tb-rl;
	float:left;
	width:500px;
	height:500px;
}

.group-header-tags .field-label {
    height:50px;
}

.group-header-tags .field-items {
    float:left;
    height:250px;
}

<div class="collapsible group-header-tags field-group-div speed-fast effect-none fieldgroup-effects-processed">
	<h3><span class="field-group-format-toggler"><a class="field-group-format-title" href="#"></a></span></h3>
	<div class="field-group-format-wrapper" style="display: block;">
		<div class="field field-name-field-herb-alias field-type-text-long field-label-above">
			<div class="field-label">別名:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-flavor field-type-text-long field-label-above">
			<div class="field-label">性味:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-channel field-type-text-long field-label-above">
			<div class="field-label">歸經:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-function field-type-text-long field-label-above">
			<div class="field-label">功效:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-cure field-type-text-long field-label-above">
			<div class="field-label">主治:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
	</div>
</div>

JsFiddle DEMO

但是在中文垂直文字中，我怎样才能使“红龙果，龙珠果，是仙人掌科三角”漂浮在别名旁边？？

Answer 1

您可以将类的显示：field-label，field-items和.field { display: table; } .field-label{ display: table-cell; float: left; } .field-items{ display: table-cell; float: left; } 更改为表格和表格单元格，如下所示：

.group-header-tags {
    writing-mode:tb-rl;
	float:left;
	width:500px;
	height:500px;
}

.group-header-tags .field-label {
    height:50px;
}

.group-header-tags .field-items {
    float:left;
    height:250px;
}
    
.field {
    display: table;
}
      
.field-label{
    display: table-cell;
    float: left;
} 
    
.field-items{
    display: table-cell;
    float: left;
}

类似的东西：

<div class="collapsible group-header-tags field-group-div speed-fast effect-none fieldgroup-effects-processed">
	<h3><span class="field-group-format-toggler"><a class="field-group-format-title" href="#"></a></span></h3>
	<div class="field-group-format-wrapper" style="display: block;">
		<div class="field field-name-field-herb-alias field-type-text-long field-label-above">
			<div class="field-label">別名:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-flavor field-type-text-long field-label-above">
			<div class="field-label">性味:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-channel field-type-text-long field-label-above">
			<div class="field-label">歸經:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-function field-type-text-long field-label-above">
			<div class="field-label">功效:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
		<div class="field field-name-field-herb-cure field-type-text-long field-label-above">
			<div class="field-label">主治:&nbsp;</div>
			<div class="field-items">
				<div class="field-item even">紅龍果、龍珠果，是仙人掌科三角柱屬</div>
			</div>
		</div>
	</div>
</div>

$ npm install crypto-js --save
$ npm install @types/crypto-js --save-dev

我希望你需要的，谢谢。