Question

我刚刚开始使用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

图片文字

-BREAK -

HEADING2

图片文字

Answer 1

试试这个

在两个div之间添加此行

<div style="clear:both"></div>

DEMO

Answer 2

在两个框之间添加此div。这将解决您的对齐问题

<div style="clear:both"></div>

Answer 3

你只需要添加

<!--box 1 ends-->
<br style="clear:both;"/>
<!--box 2 starts-->

自上而下对齐DIV /类

3 个答案: