gpt4 book ai didi

html - 我的 CSS 代码有什么问题?

转载 作者:太空宇宙 更新时间:2023-11-04 12:05:49 25 4
gpt4 key购买 nike

我是 HTML/CSS 的新手。我想建立一个网站,但我偶然发现了一个问题。

我的“内容 div”中的 div 在 div 行的顶部有一个空格,我似乎无法弄清楚是什么导致了这个问题。有人可以帮忙吗?我会非常感激。

谢谢!

<head>

<meta charset="utf-8">

<title>Vlad Olar</title>

<style type="text/css">

body {
padding:0;
margin:0;
font-family:Lato, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color:#D8DCE1;
}

.clear {
clear:both;
}

.fixedwidth {
width:960px;
margin:0 auto;
padding:0 0;
}

#topbar {
background-color:#4C7585;
height: 40px;
width: 100%;
}

#front {
height: 360px;
width: 100%;
background-color:#D8DCE1;
}

#line {
height:10px;
width:100%;
background-color:#4C4C4C;
}

#foto {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:103px;
}

#gaming {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:right;
position:relative;
top:-55px;
margin-right:103px;
}

#design {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:198px;
}

#content {
margin:0;
padding:0;
}

#fotocontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}

#designcontent {
background-color:#D1A366;
height:500px;
width:320px;
float:left;
}

#gamingcontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}

#footer {
background-color:#4C7585;
height: 40px;
width: 100%;
}

#container {
margin:0;
padding:0;
}

</style>

</head>
<body>

<div id="container">

<div id="topbar">

<div class="fixedwidth">

</div>

</div>

<div id="front">

</div>

<div id="line">

<div class="fixedwidth">

<div id="foto">

</div>

<div id="design">

</div>

<div id="gaming">

</div>

</div>

</div>

<div class="clear">

</div>

<div id="content">

<div class="fixedwidth">

<div id="fotocontent">

</div>

<div id="designcontent">

</div>

<div id="gamingcontent">

</div>

</div>

</div>

<div class="clear">

</div>

<div id="footer">

<div class="fixedwidth">

</div>

</div>

</div>

</body>

最佳答案

正如@HiddenHobbes 所写,您遇到问题是因为#foto#design#gaming 正在下拉.clear div(删除 top: -55px; 你会看到它)。

如果您不想重新计算边距,您可以将这些 block 包装在一些带有position: absolute; 的包装器中,以防止在下一个 div 上出现下拉行为。

在你的 html 中

<div id="line">
<div class="fixedwidth">
<div class="foowrapper">
<div id="foto"></div>
<div id="design"></div>
<div id="gaming"></div>
</div>
</div>
</div>

在你的CSS中

.foowrapper {
position: absolute;
width: 100%;
}
.fixedwidth {
position: relative;
}

Fiddle demo

关于html - 我的 CSS 代码有什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29391085/

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