Question

目标是将汉字，英语和假名文本行相互排列成特定格式。这样文本在很大程度上是可以互换的，并且不是硬编码的。

汉字和英语应均匀放置。假名应该与第二行的顶部对齐。

它以前工作过，但它是硬编码的，我评论了这些区域。

它应该是这样的：

body {
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: 60%;
	font-family: Verdana,sans-serif;
	word-break: break-all;
}

#header {
	padding-top: 10px;
	width:100%;
	height:286px;
	padding-top: 20px;
}
	#kanjiTransl{
		display: inline-block;
		font-size: 5.5em;
		font-weight: bold;
		/*position: absolute;*/
		/*left: 25px;*/
		/*top:15px;*/
		line-height: 1.1em;
	}
	#jaN {
		margin-bottom: 5px;
	}
	#kana {
		display: inline-block;
		vertical-align: top;
		color: #777;
		/*position: inline;*/
		/*right: 30px;*/
		/*top:130px;*/
		/*font-size: 1.4em;*/
	}
	.top {
		letter-spacing: -0.07em;
	}
	.bottom {
		letter-spacing: -0.02em;
		/*margin-left: 12px;*/
	}
	.topColor {
		/*color: #FF2EDF;
		color: #84FF00;
		color: #b4FF00;*/
		color: #a78317;
		color: #908090;
	}
	.bottomColor {
		/*color: #84FF00;
		color: #FF2EDF;
		color: #dc3616;*/
		color: #9f3420;
		color: #222266;
	}
	.headerItem {
		display: inline-block;
		/*height:110px;*/
		/*width:900px;*/
		/*position: relative;*/
		/*left:.6em;*/
		/*line-height: 110px;*/
		font-size:15em;	
		font-weight:900;
	}

<body>
		<div id="header">
			<div id="kanjiTransl">
				<span id="jaN" class="topColor">驚<br>的<br></span>
				<span id="jaV" class="bottomColor">速<br>記</span>
			</div>
			<span class="headerItem top topColor">LARGE</span><br>
			<span class="headerItem bottom bottomColor">WARNING</span>
			<span id="kana">ノテイショナルヴェロシティ</span>
		</div>
</body>

Answer 1

使用此布局并根据您的需要进行调整：

#header {
  padding-top: 10px;
  width: 100%;
  height: 286px;
  width: 850px;
}
#jaN,
#jaV {
  font-size: 5.5em;
  font-weight: bold;
  line-height: 1.1em;
  vertical-align: top;
  color: #777;
}
#kana {
  float: right;
}
.top,
.bottom {
  vertical-align: top;
  font-weight: 900;
}
.top {
  letter-spacing: -0.07em;
  color: #908090;
  font-size: 15em;
  line-height: 0.3em;
}
.bottom {
  letter-spacing: -0.02em;
  font-size: 10em;
  line-height: 0.3em;
  color: #222266;
}

<table id="header">
  <tr>
    <td id="jaN">驚
      <br>的</td>
    <td>
      <span class="top">NATIONAL</span>
    </td>
  </tr>
  <tr>
    <td id="jaV">速
      <br>記</td>
    <td>
      <span class="bottom">VELOCITY</span>
      <span id="kana">ノテイショナルヴェロシティ</span>
    </td>
  </tr>
</table>

将多种格式的文本对齐到行上

1 个答案: