css中p两列排列 |css3相册模板

css 文字压扁，css 鼠标覆盖样式，css样式回到顶部，div+css教程下载，头像图片圆形css，html中图片大小css，css3相册模板

那么大家该如何使用

<p>

标签实现两列排列呢？首先，大家需要设置一个容器，可以使用

<div>

或者是

<section>

标签作为容器，接下来大家为容器设置宽度和浮动属性：

.container{
width: 100%;
margin: 0 auto;
}
.left{
width: 50%;
float: left;
}
.right{
width: 50%;
float: right;
}

上面的代码中，大家设置了一个容器，宽度为 100% ，margin 为 0 auto ，此时容器会占据整个文档的宽度，同时居中显示。接着，大家使用

<p>

标签分别将两列内容包括起来，并分别为每一列添加了一个类名，分别为

left

和

right

，并设置宽度为 50% ,最后分别设置浮动属性为 left 和 right 。如下代码所示：

<div class="container">
<p class="left">左列内容</p>
<p class="right">右列内容</p>
</div>

通过以上设置，两列内容就可以完美排列在一起了，同时可以对每一列内部进行自由排版，实现网页排版的多样性和美观性。