CSS中有一种常见的布局方式是让左右两个div错开,这种布局方式可以让网页看起来更加美观,但是也需要注意一些细节。以下是一份简单的CSS代码,展示了如何实现这种布局方式。/* 定义两个div,分别为l
CSS中有一种常见的布局方式是让左右两个div错开,这种布局方式可以让网页看起来更加美观,但是也需要注意一些细节。以下是一份简单的CSS代码,展示了如何实现这种布局方式。
/* 定义两个div,分别为left和right */ #left { width: 50%; float: left; } #right { width: 50%; margin-left: 50%; } /* 设置左右两个div的样式 */ #left p { margin-top: 0; } #right p { margin-top: 0; margin-right: 10%; } /* 给左右两个div添加背景色 */ #left { background-color: #f2f2f2; } #right { background-color: #fff; }
首先,我们定义了两个div,其中#left的宽度为50%,并且浮动到了左侧;#right的宽度同样为50%,但是它的左边距为50%,相当于一开始是隐藏在左边的。
然后,我们给左右两个div分别设置了样式。由于它们都包括了p标签,我们把它们的上边距都设为0,避免出现多余的空白。同时,为了让右侧的div更加美观,我们还给它的右边距设了一个10%的值。
最后,我们给左右两个div添加了背景色,这样网页看起来就更加清晰明了了。
粉丝
0
关注
0
收藏
0