gpt4 book ai didi

css - HTML/CSS 布局上的流畅 DIVS

转载 作者:太空宇宙 更新时间:2023-11-04 14:01:32 26 4
gpt4 key购买 nike

这是我第一次尝试从头开始创建自定义 html 页面,但遇到了一些麻烦:

这基本上就是我想要的:

enter image description here

我希望网站根据窗口大小自动调整大小 - 第一个 div bg 应该是全宽,它的内部应该是固定宽度(居中)

我首先尝试手动创建每个 div - 到目前为止看起来还不错,除了标题内的内部 div 我想居中

我真的是 css/html 的菜鸟,所以如果有任何方法可以改进我的代码 - 请告诉我

我尝试了几种方法,但总是卡住。

尝试过:

我以上面的例子为例,但我总是卡住,所以我决定从零开始

CSS

#body_wrapper {
width:100%;
background:white;
}
#header {
width:100%;
height:200px;
background:red;
}
#header_inside {
width:500px;
height:180px;
background:green;
}
#content {
width:100%;
height:600px;
background:blue;
}
#footer {
width:100%;
height:200px;
background:yellow;
}

HTML

<body>
<div id="body_wrapper">
<div id="header">
<div id="header_inside"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

最佳答案

要使 div 居中,请使用:margin:auto;。所以;

#header_inside {
margin: auto;
[ ... ]
}

关于css - HTML/CSS 布局上的流畅 DIVS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21472856/

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