gpt4 book ai didi

html - 为什么这些 div 消失了?

转载 作者:太空宇宙 更新时间:2023-11-03 23:30:52 25 4
gpt4 key购买 nike

我正在尝试创建一个网站,内容位于两个 div 列之间,分别标记为 lwall 和 rwall ,但我无法显示两侧的 div。为什么它们会消失,我以后如何防止这种情况发生?

<!DOCTYPE html>
<html>
<head>
<style>
body{
margin:auto;
background-color: maroon;
}
.head{
margin:auto;
text-align:center;
color:#00a2e8;
background-color:maroon;
width:750px;
}
.nav{
background-color:maroon;
width:750px;
margin:auto;
text-align:left;
}
.nav ul{
margin:auto;
padding:0px;
text-align:center;
}
.nav li{
display:inline;
list-style-type:none;
padding:20px;
}
.nav a{
display:inline;
background-color:maroon;
color:white;
text-decoration:none;
}
.nav a:hover{
display:inline;
color:#00a2e8;
text-decoration:none;
}
.content{
background-color:white;
margin:auto;
width:750px;
}
.content img{
width:200px;
height:250px;
}

.content ul{
text-align:center;
padding:20px;
}
.content ul li{
display:table-cell;
list-style:none;
}
.content ul li p{
padding:10px;
}
.lwall{
float:right;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.rwall{
float:left;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.foot{}
</style>
</head>
<body>
<div class="head">
<h1>Sea Aggie Brothers & Sisters</h1>
</div>
<div class="nav">
<hr>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">Services</a></li>
<li><a href="contacts.html">Downloads</a></li>
<li><a href="about.html">About</a></li>
<li><a href="calendar.html">Calendar</a></li>
</ul>
<hr>
</div>
<div class="lWall">

</div>
<div class="rWall">

</div>
<div class="content">

<ul>
<li><div class="tbox">
<img src="Calendar.jpg" >
<h2>Calendar</h2>
<p>Check here to moniter meetings and other events. Additionally this calendar can be synchronized with other calendar programs.</p>
</div></li>
<li><div class="tbox">
<img src="Calendar.jpg" >
<h2>Resources</h2>
<p>When you join BASS you not only benafit from a strong community but also from our club resources such as our class notes & study guide database.</p>
</div></li>
<li><div class="tbox">
<img src="Contact.jpg" >
<h2>Newsfeed</h2>
<p>Catch up on the latest club news. Check here for anouncments and details on recent club events. This feed is also availible on facebook.</p>
</div></li>
</ul>

</div>
</body>
</html>

最佳答案

简单。 CSS 声明名称错误。它应该是 .lWall 和 .rWall 而不是 .lwall 和 rwall。 HTML 标签不区分大小写。但自定义 CSS 名称区分大小写。

 .lWall{
float:right;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.rWall{
float:left;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}

或者像下面这样更改您的 HTML 代码。

 <div class="lwall">

</div>
<div class="rwall">

</div>

DEMO

关于html - 为什么这些 div 消失了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25395110/

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