hkguile hkguile - 4 months ago 21
CSS Question

Vertical chinese text items float next to label

Normally it uses float left to make the second div float next to first div, here is my situation:



.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

but in chinese vertical text, how can i make "紅龍果、龍珠果,是仙人掌科三角" float next to 別名: ?

Answer

You can change the display of classes : field, field-label and field-items to table and table-cell like this:

.field { display: table; }

.field-label{ display: table-cell; float: left; } 

.field-items{ display: table-cell; float: left; }

Something like:

.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>

I hope this what you need, Thanks.