Question

我希望我的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>

Answer 1

内联元素的默认垂直对齐方式为baseline，因此请将其设置为您之后的top：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将div显示为内嵌块时，您需要在vertical-align: top; div上设置.info-right。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: