Я создаю веб-страницу для класса, использующего HTML и CSS.
У меня есть контейнер div, содержащий два абзаца, которые я пытаюсь переместить в два столбца.
Я установил столбцы с помощью float.Они действительно плавали при создании двух столбцов, однако текст все в неправильном порядке.Есть синие заголовки, которые должны быть вверху и 4 абзаца, которые должны быть установлены как 2 в каждом столбце.Кроме того, каждый идентичный абзац помещается в столбец со своим двойником, когда он ДОЛЖЕН быть в колонке с другим абзацем.
Я новичок в этом, и я так растерялся.Я играл с шириной и поплавком, и ничего не работает.Мне просто нужно знать, что я могу сделать, чтобы создать две колонки, в которых текст будет правильно отображаться.
вот мой код.Идентификатор maincontent - это основное серое поле, тогда p - для абзацев, а h2 - для заголовков:
#maincontent {float: left; margin: 0px; padding: 0px;
width: 950px; border-left: 1pt solid #999999;
border-bottom: 1pt solid #999999; border-right: 1pt solid #999999; background-color: #E0E0E0}
#maincontent.cols {width: 450px; float: left; margin: 5px; padding: 5px}
#maincontent p {width: 450px; margin: 5px; float: left; padding: 5px;
text-align: left}
#maincontent h2 {width: 450px; float: left; color: #3280EE; font-size: 16px; margin: 5px; padding: 5px;
background: url(checkmark.jpg) no-repeat; text-align: right}
Вот HTML:
<div class="cols"><!-- starts column container -->
<h2>Why Millions Turn to Us for Help</h2>
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin <a href="#">nec massa</a> velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et ullamcorper libero mattis. </p>
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. <a href="#">Aenean ut nisi</a> dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p>
<div class="cols"><!-- starts column container -->
<h2>Why Millions Turn to Us for Help</h2>
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin nec massa velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et <a href="#">ullamcorper</a> libero mattis. </p>
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. Aenean ut nisi dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p>
</div><!-- ends column container -->
Как я уже сказал, есть 4 абзаца.Как они расположены в HTML, вы можете увидеть, как они должны выглядеть в двух столбцах.Я не знаком с jsfiddle, поэтому я не уверен, как его использовать ....