gpt4 book ai didi

html - 全页宽度边框,居中内容,最好的方法?

转载 作者:行者123 更新时间:2023-11-28 15:00:51 24 4
gpt4 key购买 nike

我现在做的很多设计都要求页面居中,我使用margin:0 auto;宽度:955;

每个主要部分都有一个带有底部边框的 div,在此布局中,屏幕中央的宽度为 955。

不过,我希望实际边框是页面的整个宽度。

干净地做到这一点的最佳方法是什么?我一直在使用与 StackOverflow 用于页脚相同的方式来执行此操作,但如果我在页面上有 3 个边框看起来很乱?

最佳答案

如果您希望有几个部分被跨越整个宽度的边框分开,您最好的选择是按如下方式构建页面:

<body>
<div id="container" style="width: 100%;">
<div style="width:100%;border-top:1px solid black;">
<div style="width:955px; margin:0 auto;">
Section 1 Content
</div>
</div>
<div style="width:100%;border-top:1px solid black;">
<div style="width:955px; margin:0 auto;">
Section 2 Content
</div>
</div>
<div style="width:100%;border-top:1px solid black;">
<div style="width:955px; margin:0 auto;">
Section 3 Content
</div>
</div>
</div>
<div id="footer" style="border-top: 1px solid black;">
Footer Content
</div>
</body>

为了让您的生活更轻松,我强烈建议用类名替换内联样式并使用外部样式表。这样您就可以为每个部分指定相同的类名,并且只编写一次样式。

关于html - 全页宽度边框,居中内容,最好的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2281020/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com