我刚开始接触 HTML，为了计算机科学导论中的一个元素，我需要制作一个网页。我有一个概念，我知道我想做什么，但我不知道如何正确地做到这一点。到目前为止，我有这个:
<!DOCTYPE hmtl>
<hmtl>
<title>
Audiophile Poll - M100s or Mad Dogs v3.2?
</title>
<head>
<style>
body{
background-color: #292E37;
}
h1{
width: 100%;
color: #800000;
text-align: center;
font-family: "Lucida Console", "Courier New";
font-size: 40px;
}
.heading{
color: #808080;
text-align: left;
margin: 5px;
font-family: "Lucida Sans Unicode";
font-size: 24px;
font-weight: bold;
}
.body{
width: 100%;
font-weight: normal;
}
.image{
float: left;
}
.paragraph{
color: #808080;
font-size: 14px;
width: 60%;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<h1>
<b>
V-MODA M-100 vs. MrSpeakers Mad Dog
</b>
</h1>
<div id="box1">
<div class="heading">
V-MODA M-100
</div>
<div class="body">
<div class="image">
<img src="http://www.acgears.com/images/m_100_shadow_laying_case_square_web.jpg" height="300px" width="300px"/>
</div>
<div class="paragraph">
<b>Cost:</b> $310<br />
<b>Audio Profile:</b> "Modiophile" (near balance with light emphasis on bass)<br />
</div>
</div>
</div>
<div id="box2">
<div class="heading">
MrSpeakers Mad Dogs v3.2
</div>
<div class="body">
<div class="image">
<img src="http://cdn.head-fi.org/0/05/300x300px-LS-0512aba0_1125220115_maddog.jpeg" height="300px" width="300px"/>
</div>
<div class="paragraph">
<b>Cost:</b> <br />
<b>Audio Profile:</b> <br />
</div>
</div>
</div>
</body>
</html>
现在，我要展开里面的文字，仅此而已。我有第一组对象(第一个标题、图像和段落)右对齐，但每当我尝试加载第二组时，我得到一个奇怪的对齐方式。我需要做什么才能得到这样的东西:
标题1
图片文字
-中断-
标题 2
图片文字
最佳答案
关于html - 自上而下对齐 DIV/类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20559132/