Выравнивание DIV / классов сверху вниз

Question

Выравнивание DIV / классов сверху вниз

0

Я только начинаю входить в 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

ТЕКСТ ИЗОБРАЖЕНИЯ

JbstormburstADV 13 дек. 2013, в 06:16

Источник

Теги:

html

css

3 ответа

1

добавьте этот div между обоим полем. Это решит вашу проблему выравнивания

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

Ankur Dhanuka 13 дек. 2013, в 02:14

0

Ваша проблема решена?
Ankur Dhanuka 13 дек. 2013, в 04:46
1

Да, я был AFK, поэтому я рад, что это сработало, хотя демонстрация Sridhar была хорошим доказательством концепции.
JbstormburstADV 13 дек. 2013, в 05:06

0

Вам просто нужно добавить

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

Nikhil Kudtarkar 13 дек. 2013, в 01:47

Ещё вопросы

Да, я был AFK, поэтому я рад, что это сработало, хотя демонстрация Sridhar была хорошим доказательством концепции.

Sridhar R · Accepted Answer · 2013-12-13T02-27-00.000Z

Попробуй это

Добавьте эту линию между двумя div

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

DEMO

Ты обалденный. Большое спасибо. У меня было ощущение, что эта строка была задействована, но я не был уверен, где, как кто-то оставил ее прямо перед тегом '</ div>' по какой-то причине.