CSS样式采用内嵌样式完成,实现浮动定位(效果图如下图),有外层容器盒子,居中,宽度为页面的70%宽。内层盒子宽度相等,灰色背景;2个内层盒子分为2列,两个盒子之间有15px空隙。每列均有h2标题和一个段落构成(内容不限,但不能使用无意义的文字)。
时间: 2024-03-06 18:46:15 浏览: 149
可以使用以下内嵌样式来实现浮动定位,达到上述效果:
```html
<div style="text-align: center; width: 70%;">
<div style="overflow: hidden; margin: 0 -7.5px;">
<div style="width: 50%; float: left; padding: 0 7.5px;">
<div style="background-color: #ccc; padding: 15px;">
<h2>Title 1</h2>
<p>Content 1</p>
</div>
</div>
<div style="width: 50%; float: left; padding: 0 7.5px;">
<div style="background-color: #ccc; padding: 15px;">
<h2>Title 2</h2>
<p>Content 2</p>
</div>
</div>
</div>
</div>
```
这里使用了外层容器盒子的居中和宽度为页面的70%宽,内部使用overflow:hidden来清除浮动,然后设置两个内层盒子的宽度为50%,并使用float:left进行左浮动,同时加上padding来实现两个盒子之间的15px空隙。每个内层盒子中,使用background-color属性设置灰色背景,再分别设置h2和p标签来实现标题和段落内容。
阅读全文