以下是一个示例代码,展示了如何创建一个包含百分比和最大宽度样式容器,并在右侧添加一个重叠的块:
HTML代码:
Container Content
CSS代码:
.container {
position: relative;
width: 80%;
max-width: 800px;
margin: 0 auto;
background-color: #f2f2f2;
padding: 20px;
}
.content {
width: 70%;
float: left;
}
.overlay {
position: absolute;
top: 0;
right: 0;
width: 30%;
background-color: #ccc;
padding: 10px;
}
上述代码中,容器的宽度为80%,并使用max-width属性设置了最大宽度为800px,通过margin: 0 auto将容器居中显示。容器内部使用padding属性添加了一些空白区域。
内容块使用width: 70%设置宽度,并使用float: left将其放置在容器的左侧。
重叠的块使用position: absolute将其定位在容器的右上角,使用top: 0和right: 0使其紧贴容器的右边界。通过设置width: 30%将其宽度设置为容器的30%。使用padding属性添加了一些空白区域,并使用background-color属性设置了背景颜色。
通过调整容器和块的宽度百分比,可以根据实际需要进行布局。
上一篇:百分百ddos防护源码