gpt4 book ai didi

html - 如何在内容旁边放置侧边栏?

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

我想将侧边栏放在我的内容旁边,但我的页脚一直向上移动。我尝试在内容和侧边栏上使用 float 符号,但它不起作用。我对此有点陌生,所以我不知道如何解决它。

请帮忙?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Stillsamhetens SPA</title>
<link type="text/css" rel="stylesheet" media="screen" href="spa_screen.css" />
<link type="text/css" rel="stylesheet" media="print" href="spa_print.css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
<div id="topnav">
<header>
<a href="index.html"><img src="header.png"></a>
</header>
<nav>
<ul id="meny">
<li><a href="behandlingskurer.html">BEHANDLINGSKURER</a></li>
<li><a href="massage.html">MASSAGE</a></li>
<li><a href="relax.html">RELAX</a></li>
<li><a href="rehabilitering.html">REHABILITERING</a></li>
<li><a href="om.html">OM OSS</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</nav>
</div>


<div id="maincontent">
<div id="content" class="index">
<div id="contentomoss">
<article>
<p>
contentomoss
</p>
</article>

</div>
<div id="sidebar">
sidebar
</div>
</div>
</div>


<footer>
<div id="footermain">
<div id="footertextfirst">
<strong>Stillsamhetens spa</strong></strong></br>
Öppettider: alla dagar 10-20</br>
Telefontider: alla dagar 11-18</br>
</div>
<div id="footertextmiddle">
Maila: info@stillsamhetensspa.se </br>
Privatbokning: 0470-123 45 67 </br>
Gruppbokning: 0470-123 45 66</br>
</div>
<div id="footertextlast">
Besöksadress: Ormeshaga 61</br>
Postadress: 360 51 Hovmantorp</br>
<a href="kontakt.html"><strong><font color="#FFFFFF">Hitta hit</font></strong></a></br>
</div>
</div>
</footer>

</body>
</html>

@charset "UTF-8";
/* CSS Document */

{

}

#topnav {
width: 1000px;
position: relative;
margin: 30px auto 0 auto;
}

#header {
margin: 0 auto 0 auto;
}

#meny {
margin: 0 auto 40px auto;
width: 1000px;
text-align: center;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: lighter;
font-size: 18px;
color: black;
text-decoration:none;
}

#maincontent {
background-color:#F8F8F8;
}

#content {
width: 1000px;
margin: 0 auto 0 auto;
}

#contentomoss {
width: 700px;
float: left;
background-color: red;
}

#sidebar {
width: 200px;
float: left;
margin-right: 50px;
background-color: green;
}

li {
float: left;
margin-right: 60px;
list-style-type: none;
}

a {
text-decoration: none;
color: black;
}

article {
width: 600px;
margin-top: 120px;
}

p {
margin-top: 120px;
}

footer {
height: 110px;
margin: -16px auto 0 auto;
background-color:#636363;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:lighter;
color: white;
font-size: 18px;
}

#footermain {
width: 1000px;
padding-top: 20px;
margin: 0 auto 0 auto;
background-color: blue;
}

#footertextfirst {
width: 322px;
float:left;
}

#footertextmiddle, #footertextlast {
width: 323px;
float: left;
margin-right: 10px;
}

最佳答案

尝试在你的 css 中添加 footer {clear: left;}

关于html - 如何在内容旁边放置侧边栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27313402/

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