Question

<doctype html!>
<html lang="en-US">
<style>
heading{
text-align:center;
color:magenta;
font-family:Ubuntu Condensed;
font-size:45px;
font-style:italic;
display:block;
}
subheading{
text-align:left;
text-decoration:underline;
font-family:Ubuntu;
font-size:18px;
display:block;
font-weight:bold;
} 
article{
font-family:Ubuntu Mono;
font-size:18px;
display:inline-block;
width:800px;
}
div{
margin-left:100px;
margin-right:100px;
border:5px;
border-radius:25px;
box-shadow: 20px 20px 10px #888888;
background-color:#E6BC93;
padding:10px;
}
talas{
font-family:Serif;

footer {
position: absolute;
text-align:center;
bottom:0px;
height: 20px;
width: 100%;
}
img{
position:absolute;
}

</style>
<title> Mridangam </title>
<body>
<div>
<heading>The Mridangam</heading>


<subheading>Mridangam In Hindu Scriptures</subheading>
<article>
In ancient Hindu sculpture, painting, and mythology, the mridangam is often depicted as the instrument of choice for a number of deities including Ganesha (the remover of     obstacles) and Nandi, who is the vehicle and follower of Shiva. Nandi is said to have played the mridangam during Shiva's primordial tandava dance, causing a divine rhythm to resound across the heavens. The mridangam is thus also known as "Deva Vaadyam," or "Divine Instrument".
</article><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Wiki-    mridangam.jpg/250px-Wiki-mridangam.jpg" />
<hr>
<br/>
<subheading>Basic Lessons:</subheading>
<talas>
<ul>
<a href="adi-tala.html">    <li>Adi Tala</li></a>   <br/>
<a href="rupaka-tala.html"> <li>Rupaka Tala</li></a><br/>
<a href="misra-chapu-tala.html"><li>Misra Chapu</li></a><br/>
<a href="ganda-chapu-tala.html"><li>Ganda Chapu</li></a><br/>
</ul>
</talas>

</div>



<br/><br/><br/><br/><br/><br/>
<footer><center>&copy Copyright of Vishal Subramanyam</footer></center>
</body></html>

问题在于“印度教经文中的Mridangam”这个副标题之间存在很大的差距。正如用户可以看到的那样，副标题和文章之间存在一些空间。我希望文章文本位于乐器图像的左侧。提前谢谢。

修改这是我目前得到的输出。您可以清楚地看到子标题和文章之间的差距。下面是我的图片的链接，因为我没有足够的声誉，因此我无法发布图片： https://drive.google.com/open?id=0B8uVrRovWgCOUjNKbWk5SGRGWGs&authuser=0

Answer 1

你的CSS无效。

talas{
    font-family:Serif;

这是一个缺失的括号。将其更改为：

talas{
    font-family:Serif;
}

文章和图像并排对齐不正常

1 个答案: