gpt4 book ai didi

css - 具有自动边距的特定 css 定位/动态宽度

转载 作者:行者123 更新时间:2023-11-28 15:34:17 25 4
gpt4 key购买 nike

为了更好地理解问题做了一张图片。

picture showing the problem

需要 .bgimage 和 .content div 的代码

这对于跨浏览器 css(IE7+ 和其他主要浏览器)甚至没有任何脚本是否可行?

最佳答案

它实际上比预期的要长一点,但我在现实生活中得到了你的照片。如果没有先做更多研究并编写一些实际代码,请不要在这里再问任何问题。

Here is a demo

代码

HTML:

<body>
<div id = "header">
</div>
<div id = "bgimage">
</div>
<div id = "content">
</div>
<span class = "clear"></span>
<div id = "footer">
</div>
</body>

CSS:

*
{
margin: 0;
padding: 0;
}

body
{
width: 960px;
margin-left: auto;
margin-right: auto;
}

#header
{
width: 100%;
height: 200px;
background-color: purple;
}

#bgimage
{
position: absolute;
top: 200px;
left: 0px;
right: 50%;
height: 600px;
background-color: green;
}

#content
{
position: relative;
width: 700px;
height: 600px;
float: right;
z-index: 2;
background-color: blue;
}

.clear
{
clear: both;
}

#footer
{
position: relative;
top: 600px;
width: 100%;
height: 200px;
background-color: red;
}

注意:我还没有优化 CSS,那里可以做一些工作。

The code is also here

解释

我在代码中使用的元素(您可能想用谷歌搜索它们):

  • CSS 重置
  • 清晰的 CSS
  • 绝对定位 CSS
  • 相对定位 CSS

关于css - 具有自动边距的特定 css 定位/动态宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16349433/

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