Home > Article > Web Front-end > How to display two paragraphs side by side in css
How to display two paragraphs side by side in css
- WBOYOriginal
- 2021-12-03 09:26:565421browse
In CSS, you can use the float attribute to display two elements side by side. This attribute is used to set the floating direction of the element. When the value of the attribute is "left", the element floats to the left, so that the elements are displayed side by side. , the syntax is "element {float:left;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to display two paragraphs side by side in css
You can use the float attribute to uniformly set the float to the left to display two paragraphs of elements side by side. When the attribute value is left, the element floats to the left.
The float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is.
If floating non-replaced elements, specify an explicit width; otherwise, they are made as narrow as possible.
Note: If there is very little space for a floating element on a row, the element will jump to the next row, and this process will continue until a certain row has enough space.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p{
width:200px;
height:100px;
float:left;
}
</style>
</head>
<body>
<p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
<p>这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段这是另一段</p>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to display two paragraphs side by side in css. For more information, please follow other related articles on the PHP Chinese website!