为什么我的div不显示内联？

亚历山大·托尔卡切夫（Alexander Tolkachev）

我希望将TOP 10文字放置在与该文字相同的位置，Kreuger National Park但是我却得到了

.info{
	background: url(pictures/info-shape.png) no-repeat;
	width: 100%;
	height: 950px;
}

.info-left{
	width: 50%;
	padding: 282px 0 0 38px;
	display: inline-block;
}

.info-block{
	margin-bottom: 30px;
}

h2 {
	font: 48pt "Lindsey", Arial, Helvetica, sans-serif;
	color: #bd950c;
	display: inline;
	margin-right: 15px;
}

h3 {
	font: 28pt "Perpetua Titling MT", Arial, Helvetica, sans-serif;
	color: black;
	margin-left: 15px;
	display: inline;
}

p {
	text-align: justify;
	-moz-text-align-last: left;
	text-align-last: left;
}

.info-right{
	width: 30%;
	padding: 282px 0 0 100px;
	display: inline-block;
}

<div class="info">
  <div class="info-left">
    <h2 class="info-block">Kreuger</h2>
    <h3>National Park</h3>
    <p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United. States or China. The Nile River, which runs through 11 different countries in Africa, is the longest in the world.</p>
    <p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United.</p>
  </div>
  <div class="info-right">
    <h2 class="info-block">
      TOP 10
    </h2>
  </div>	
</div>

j08691

内联元素的默认垂直对齐方式是baseline，因此将其设置为您所追求的top：

.info-right {
    vertical-align:top;
}

.info{
	background: url(pictures/info-shape.png) no-repeat;
	width: 100%;
	height: 950px;
}

.info-left{
	width: 50%;
	padding: 282px 0 0 38px;
	display: inline-block;
}

.info-block{
	margin-bottom: 30px;
}

h2 {
	font: 48pt "Lindsey", Arial, Helvetica, sans-serif;
	color: #bd950c;
	display: inline;
	margin-right: 15px;
}

h3 {
	font: 28pt "Perpetua Titling MT", Arial, Helvetica, sans-serif;
	color: black;
	margin-left: 15px;
	display: inline;
}

p {
	text-align: justify;
	-moz-text-align-last: left;
	text-align-last: left;
}

.info-right{
	width: 30%;
	padding: 282px 0 0 100px;
	display: inline-block;
  vertical-align:top;
}

<div class="info">
  <div class="info-left">
    <h2 class="info-block">Kreuger</h2>
    <h3>National Park</h3>
    <p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United. States or China. The Nile River, which runs through 11 different countries in Africa, is the longest in the world.</p>
    <p class="info-block">Africa is comprised of desert, tropical, savanna grasslands, jungle and even subarctic climates. The top half of the continent is comprised of desert, and the Sahara Desert, the world’s hottest desert, is located in Northern Africa, and at 3.5 million square miles is approximately the size of the United.</p>
  </div>
  <div class="info-right">
    <h2 class="info-block">
      TOP 10
    </h2>
  </div>	
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。