我正在开发一个分成三部分的网站。我在绝对中心有图像,左右有文字。当网页的宽度改变时,我如何将每个单独的部分居中,使其按比例居中?涉及margin-left/right auto的东西?
希望一切都有意义..
谢谢!
文字图
| 1 | 2 | 3 |
拉伸网页
| * * 1 * * | * * 2 * * | * * 3 * * |
如果您提前知道每列内容的宽度,则可以使用 3 个缩放 div 来表示列,每个列都包含一个固定宽度的居中 div 用于内容。
在正文中,对于三列,您可以拥有(将像素宽度替换为适合您页面的大小):
<div class="outer" style="margin-left:0; margin-right:67%;">
<div class="inner" style="width: 100px;">
<p>some text</p><p>more text</p></div></div>
<div class="outer" style="margin-left:33%; margin-right:33%;">
<div class="inner" style="width: 200px;">
<img src="someimage"></div></div>
<div class="outer" style="margin-left:67%; margin-right:0;">
<div class="inner" style="width: 150px;">
<p>and another<br>piece of text</p></div></div>
并且,在头部,每种类型的 div 的样式。
<style type="text/css">
.outer {
position:absolute;
width:33%;
}
.inner {
margin-left:auto;
margin-right:auto;
}
</style>
根据您网站的需要,对于每个内部 div,您可以设置绝对大小、设置相对大小(作为包含 33% 宽度 div 的百分比)或设置绝对左边距和右边距宽度。