Поместить два абзаца рядом друг с другом?

Question

Я экспериментировал с абзацами и писал им из тега script, и мне было интересно, есть ли способ разместить их рядом друг с другом по горизонтали, а не снизу. Мой текущий код выглядит так:

<p id="csvData"></p>
<p id="csvData2"></p> 

Я не могу понять, как заставить "csvData" и "csvData2" перейти рядом друг с другом.

Answer 1

Это не сценарий, это легко сделать с помощью CSS.

#csvData {
  border: 1px solid red;
  height: 200px;
  float: left;
  width: 45%;
}
#csvData2 {
  border: 1px dotted blue;
  height: 400px;
  float: right;
  width: 45%;
}

<p id="csvData"></p>
<p id="csvData2"></p> 

Answer 2

Используйте CSS, чтобы изменить их поведение по умолчанию:

p {
    display: inline;
}

ИЛИ ЖЕ

p {
    display: inline-block;
}

Читайте здесь: CSS дисплей: встроенный против встроенного блока

Answer 3

Есть несколько возможных ответов, в зависимости от того, что вы подразумеваете под "рядом".

<p id="csvData"></p>
<p id="csvData2"></p>

Если длина абзаца не является проблемой, первым вопросом может быть "Почему вам нужно <p> теги?"Понимание разницы между блочными тегами и встроенными тегами является основополагающим в HTML. Я упоминаю об этом, потому что вы указываете, что вы новичок в HTML. Вы можете найти то, что вам нужно, просто используя <span> или какой-то другой тег. См. Документацию Mozilla Developer Network для объяснения блочных и встроенных элементов.

Использование другого элемента, такого как <span> в конечном итоге предпочтительнее <p> теги типа блока, на мой взгляд.

<!-- Alternative, with spans instead -->
<span id="csvData"></span>
<span id="csvData2"></span>

Или, если нужно, вы можете использовать CSS

#csvData, #csvData2 {
   display: inline; /* or, inline-block */
}

@Moose предоставил хорошую ссылку в другом ответе на вопрос, объясняющий разницу между block, inline и inline-block. Стоит прочтения.

Если вам нужны абзацы в макете из двух столбцов, у этого вопроса есть много решений здесь, в Stackru. например, здесь, здесь и здесь.

Другое возможное решение - поплавки. Плавания применяются через CSS, и элементы укладываются влево (или вправо, в зависимости от объявления) с минимальной шириной. Есть несколько осложнений с поплавками. Float изменяет ширину элементов по умолчанию и может вызвать другие сложности, связанные с высотой / шириной объекта. (Например, в противном случае нестандартный абзац занимает столько ширины, сколько может, естественно, но плавающий абзац имеет меньшую ширину.) Обычно, когда вы используете float, вам нужно будет указать ширину вручную, и вам нужно будет "очистить" поплавки позже. Здесь есть много хороших ресурсов, в том числе здесь и здесь.

/* CSS */
#csvData, #csvData2 {
   border: 1px dotted blue; /* To show the paragraphs */
   float: left;
   width: 100px;
}

Answer 4

Использование display: inline;, display: inline-block; или же float: left;

p {
  display: inline-block;
  }

<p id="csvData">1</p>
<p id="csvData2">2</p> 

Answer 5

На самом деле, поскольку вы, кажется, хотите отобразить данные таблицы, почему бы не сделать ее таблицей?

table {
  width: 100%; /* not necessary if 100%, but can be set narrower here */
  }

<table>
  <tr>
    <td>
      <p id="csvData">One</p>
    </td>
    <td>
      <p id="csvData2">Two</p>
    </td>
  </tr>
</table>

Answer 6

Пожалуйста, попробуйте следующее:

<p id="csvData" style="display: inline-block; width: 50%;"></p>
<p id="csvData2" style="display: inline-block; width: 50%;"></p> 

Кроме того, вы можете добавить запись CSS, такую ​​как:

p#csvData, p#csvData2 {
    display: inline-block;
    width: 50%;
}

надеюсь, что это помогает.. ура

Answer 7

Элементы p и div - это элементы уровня блока, где span - встроенный элемент.

Вы можете обернуть каждый <p> в <div> или использовать <span>