我是CSS / HTML的新手，我试图为我的公司制作一个非常简单快速的网站。我成功地创建了一个我认为符合他们给我的要求的网站。请注意，我被告知不要使用很多时间制作这个网站。
我遇到的问题是，当我在浏览器中将网站置于窗口模式时，div会融合在一起。我想要做的是使网站保持不变，如果用户在浏览器中使用窗口模式，用户将不得不滚动。我不知道这对任何人是否有意义，但我希望有人可以就如何做到这一点向我提供建议。
我尝试了很多东西，但没有一个有效。所以我最好的猜测是我的旧学校HTML代码有问题。 ：p
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-image: url("https://optimalassistanse.no/wp-content/uploads/2016/02/klepp-240x300.png"), url(https://orglogo.difi.no/api/logo/250/859223672), url(https://static1.squarespace.com/static/56fc08f17c65e4e90c66db4c/5a4be277652dea72c86da007/5a95f84553450a754a4c5de8/1519778436009/Gjesdal.png?format=1500w), url(http://www.kommunenokkelen.no/listKommuner-portlet/img/kom_logo_middels/l1119.png);
background-repeat: no-repeat;
background-position: right 1000px top -0%, right 1300px top -0%, right 400px top -0%, right 700px top -0%;
background-size: 120px 120px;
}
div.wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
button.klepp {
position: absolute;
top: 10%;
right: 1000px;
top: 12%;
}
button.time {
position: absolute;
top: 10%;
right: 1300px;
top: 12%;
}
button.ha {
position: absolute;
top: 10%;
right: 712px;
top: 12%;
}
button.gjesdal {
position: absolute;
top: 10%;
right: 400px;
top: 12%;
}
div.felles {
position: absolute;
right: 400px;
width: 40%;
top: 150px;
}
div.felles2 {
position: absolute;
right: 150px;
width: 40%;
top: 90px;
}
div.test3 {
position: absolute;
right: 400px;
width: 40%;
top: 30%;
}
</style>
<title>Ansatte i IT avdelingane</title>
</head>
<body style="background-color:#edeef0c2;">
<div div class="wrapper">
<div>
<button onclick="toogle_visibility('KleppKommune');" button class="klepp">Klepp kommune</button>
</div>
<div>
<button onclick="toogle_visibility2('TimeKommune');" button class="time">Time kommune</button>
</div>
<div>
<button onclick="toogle_visibility3('HaKommune');" button class="ha">Hå kommune</button>
</div>
<div>
<button onclick="toogle_visibility4('GjesdalKommune');" button class="gjesdal">Gjesdal kommune</button>
</div>
<div id="info" style="display:block" div class="felles">
<br>
<h1><font size="5">Velkommen</font></h1>
<br>
Her vil du finne informasjon om alle IT-ansatte i Jærkommunane. Klikk på et kommunenavn for å se informasjon om deres IT-ansatte.
</div>
<div id="KleppKommune" style="display:none" div class="felles">
<h1><font size="5">Ansatte i IT avdelingen hos Klepp kommune:</font></h1>
<div>
<b><font size= "4">Anja Kleppe Lyngra:</font></b>
<br>
<img src= "https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-9/13015473_10156851190915125_3361015358110699460_n.jpg?oh=f9bdc5e67c8621e0aed442ac12b9f24a&oe=5AFFA8D7" border="0" alt "Bilde av Anja" width="150" height="150">
<br>
<b><font size= "4"></font>Stilling:</b> Digitaliseringssjef
<br>
<b><font size= "4"></font>Erfaringer:</b> Digitalisering
<br>
<br>
<b><font size= "4">Arve Aleksandersen:</font></b>
<br>
<img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAMABADGAAwAAQAAAAAAAAqXAAAAJDRhZGY2Y2ZhLTFhODQtNDMxMi1hN2JkLTdjMDNkZjIxZjYzZA.jpg" border="0" alt="Bilde av Arve" width= "150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> Office 365, Azure,
<br>
integrasjon, scripting og automasjon,
<br>
Windows Server, Exchange
<br>
<br>
<b><font size= "4">Bjørn Haukås:</b>
<br>
<img src="C:\Users\eke10847\Pictures\bjorn.png" border="0" alt="Bilde av Bjørn" width= "150" height="150">
<br>
<b>Stilling:</b> IT-konsulent
<br>
<b>Erfaringer:</b> SQL
<br>
<br>
<b><font size= "4">Øystein Lund:</font></b>
<br>
<img src="C:\Users\eke10847\Pictures\oystein.png" border="0" alt="Bilde av Øystein" width= "150" height="150">
<br>
<b>Stilling:</b> IT-konsulent
<br>
<b>Erfaringer:</b> Print
</div>
<div div class="felles2">
<b><font size="4">Even Løland Kestilæ:</font></b>
<br>
<img src="http://i65.tinypic.com/1zv5rms.png" border="0" alt="Bilde av Even" width= "150" height="150">
<br>
<b>Stilling:</b> Lærling
<br>
<b>Erfaringer:</b> Programmering, Office365, telefoni, brukerstøtte, MDM, Exchange
<br>
<br>
<b><font size= "4">Johan Foss:</font></b>
<br>
<img src="C:\Users\eke10847\Pictures\johan.png" alt="Bilde av Johan" border="0" width="150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> Telefoni
<br>
<br>
<b><font size= "4">Lars Sunde:</font></b>
<br>
<img src= "C:\Users\eke10847\Pictures\lars.png" border="0" alt="Bilde av Lars" width="150" height="150">
<br>
<b>Stilling:</b> IT-driftssjef
<br>
<b>Erfaringer:</b> SQL, VmWare
<br>
</div>
</div>
<div id="TimeKommune" style="display:none" div class="felles">
<h1><font size="5">Ansatte i IT avdelingen hos Time kommune:</font></h1>
<p>
<div>
<b><font size= "4">Espen Kverneland:</font></b>
<br>
<img src= "C:\Users\eke10847\Pictures\uten navn.png" border="0" alt "Bilde av Espen" width="150" height="150">
<br>
<b>Stilling:</b> IT-sjef
<br>
<b>Erfaringer:</b> sjef
<br>
<br>
<b><font size= "4">Kirsti Sveinsvoll:</font></b>
<br>
<img src="C:\Users\eke10847\Pictures\kirsti time.png" border="0" alt="Bilde av Kirsti" width= "150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> MDM, ipad, Windows AS
<br>
VmWare, FEIDE, O365, Aruba
<br>
HP procurve, HP IMC, brukerstøtte.
<br>
Er en del av IT avdelingen i kommunen,
<br>
men jobber primært mot Oppvekst/Skole.
<br>
<br>
<b><font size= "4">Bjørn Haukås:</b>
<br>
<br>
</div>
<div div class="felles2">
<b><font size="4">Torstein Tunheim Olsen:</font></b>
<br>
<img src="https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-0/p110x80/14671221_1480918125258692_7272885452219638259_n.jpg?oh=049f4c8bd93eca0ff768ac00dcdab30c&oe=5B44449C" border="0" alt="Bilde av Torstein" width= "150" height="150">
<br>
<b>Stilling:</b> Lærling
<br>
<br>
<b><font size= "4">Johan Foss:</font></b>
<br>
<img src="https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-9/47494_426861588439_5443919_n.jpg?oh=713f88b3328dcb6dedf98af639697c8b&oe=5B11D51F" border="0" width="150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> Telefoni
<br>
<br>
<b><font size= "4">Lars Sunde:</font></b>
<br>
<img src= "https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-0/c0.0.370.370/p370x247/13615488_10210032582439140_4021367635855021644_n.jpg?oh=0152b2750f7b3c3962c00b3281e4b686&oe=5B439C65" border="0" alt="Bidle av Lars" width="150" height="150">
<br>
<br>
<b><font size= "4">Øystein Lund:</font></b></p>
<img src= "http://www.hjemit.net/lundweb/images-albums/oystalbum/oyst_ler.jpg" border= "0" alt="Bilde av Øystein" width="150" height="150">
</div>
</div>
<div id="HaKommune" style="display:none" div class="felles">
<h1><font size="5">Ansatte i IT avdelingen hos Hå kommune:</font></h1>
<p>
<div>
<b><font size= "4">Anja Kleppe Lyngra:</font></b>
<br>
<img src= "https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-9/13015473_10156851190915125_3361015358110699460_n.jpg?oh=f9bdc5e67c8621e0aed442ac12b9f24a&oe=5AFFA8D7" border="0" alt "Bilde av Anja" width="150" height="150">
<br>
<b>Stilling:</b> Digitaliseringssjef
<br>
<b>Erfaringer:</b> Digitalisering
<br>
<br>
<b><font size= "4">Arve Aleksandersen:</font></b>
<br>
<img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAMABADGAAwAAQAAAAAAAAqXAAAAJDRhZGY2Y2ZhLTFhODQtNDMxMi1hN2JkLTdjMDNkZjIxZjYzZA.jpg" border="0" alt="Bilde av Arve" width= "150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> Programmering, Office365,
<br>
HyperV, SQL
<br>
<br>
<b><font size= "4">Bjørn Haukås:</b>
<br>
<br>
</div>
<div div class="felles2">
<b><font size="4">Even Løland Kestilæ:</font></b>
<br>
<img src="http://i65.tinypic.com/1zv5rms.png" border="0" alt="Bilde av Even" width= "150" height="170">
<br>
<b>Stilling:</b> Lærling
<br>
<br>
<b><font size= "4">Johan Foss:</font></b>
<br>
<img src="https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-9/47494_426861588439_5443919_n.jpg?oh=713f88b3328dcb6dedf98af639697c8b&oe=5B11D51F" border="0" width="150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> Telefoni
<br>
<br>
<b><font size= "4">Lars Sunde:</font></b>
<br>
<img src= "https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-0/c0.0.370.370/p370x247/13615488_10210032582439140_4021367635855021644_n.jpg?oh=0152b2750f7b3c3962c00b3281e4b686&oe=5B439C65" border="0" alt="Bidle av Lars" width="150" height="150">
<br>
<br>
<b><font size= "4">Øystein Lund:</font></b></p>
<img src= "http://www.hjemit.net/lundweb/images-albums/oystalbum/oyst_ler.jpg" border= "0" alt="Bilde av Øystein" width="150" height="150">
</div>
</div>
<div id="GjesdalKommune" style="display:none" div class="felles">
<h1><font size="5">Ansatte i IT avdelingen hos Gjesdal kommune:</font></h1>
<p>
<div>
<b><font size= "4">Anja Kleppe Lyngra:</font></b>
<br>
<img src= "https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-9/13015473_10156851190915125_3361015358110699460_n.jpg?oh=f9bdc5e67c8621e0aed442ac12b9f24a&oe=5AFFA8D7" border="0" alt "Bilde av Anja" width="150" height="150">
<br>
<b>Stilling:</b> Digitaliseringssjef
<br>
<b>Erfaringer:</b> Digitalisering
<br>
<br>
<b><font size= "4">Arve Aleksandersen:</font></b>
<br>
<img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAMABADGAAwAAQAAAAAAAAqXAAAAJDRhZGY2Y2ZhLTFhODQtNDMxMi1hN2JkLTdjMDNkZjIxZjYzZA.jpg" border="0" alt="Bilde av Arve" width= "150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> Programmering, Office365,
<br>
HyperV, SQL
<br>
<br>
<b><font size= "4">Bjørn Haukås:</b>
<br>
<br>
</div>
<div div class="felles2">
<b><font size="4">Even Løland Kestilæ:</font></b>
<br>
<img src="http://i65.tinypic.com/1zv5rms.png" border="0" alt="Bilde av Even" width= "150" height="170">
<br>
<b>Stilling:</b> Lærling
<br>
<br>
<b><font size= "4">Johan Foss:</font></b>
<br>
<img src="https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-9/47494_426861588439_5443919_n.jpg?oh=713f88b3328dcb6dedf98af639697c8b&oe=5B11D51F" border="0" width="150" height="150">
<br>
<b>Stilling:</b> IT-Konsulent
<br>
<b>Erfaringer:</b> Telefoni
<br>
<br>
<b><font size= "4">Lars Sunde:</font></b>
<br>
<img src= "https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-0/c0.0.370.370/p370x247/13615488_10210032582439140_4021367635855021644_n.jpg?oh=0152b2750f7b3c3962c00b3281e4b686&oe=5B439C65" border="0" alt="Bidle av Lars" width="150" height="150">
<br>
<br>
<b><font size= "4">Øystein Lund:</font></b></p>
<img src= "https://scontent-arn2-1.xx.fbcdn.net/v/t1.0-0/c0.0.370.370/p370x247/13615488_10210032582439140_4021367635855021644_n.jpg?oh=0152b2750f7b3c3962c00b3281e4b686&oe=5B439C65" border="0" alt="Bidle av Lars" width="150" height="150">
</div>
</div>
</div>
<script type="text/javascript">
function toogle_visibility(KleppKommune) {
let x = document.getElementById("KleppKommune");
if (x.style.display === "none") {
x.style.display = "block";
} else {
window.alert("Klepp kommune er allerede åpen!")
}
x = document.getElementById("TimeKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("HaKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("GjesdalKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("info");
if (x.style.display === "block") {
x.style.display = "none";
}
}
</script>
<script type="text/javascript">
function toogle_visibility2(TimeKommune) {
let x = document.getElementById("TimeKommune");
if (x.style.display === "none") {
x.style.display = "block";
} else {
window.alert("Time kommune er allerede åpen!")
}
x = document.getElementById("KleppKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("HaKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("GjesdalKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("info");
if (x.style.display === "block") {
x.style.display = "none";
}
}
</script>
<script type="text/javascript">
function toogle_visibility3(HaKommune) {
let x = document.getElementById("HaKommune");
if (x.style.display === "none") {
x.style.display = "block";
} else {
window.alert("Hå kommune er allerede åpen!")
}
x = document.getElementById("TimeKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("KleppKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("GjesdalKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("info");
if (x.style.display === "block") {
x.style.display = "none";
}
}
</script>
<script type="text/javascript">
function toogle_visibility4(GjesdalKommune) {
let x = document.getElementById("GjesdalKommune");
if (x.style.display === "none") {
x.style.display = "block";
} else {
window.alert("Gjesdal kommune er allerede åpen!")
}
x = document.getElementById("TimeKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("KleppKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("HaKommune");
if (x.style.display === "block") {
x.style.display = "none";
}
x = document.getElementById("info");
if (x.style.display === "block") {
x.style.display = "none";
}
}
</script>
</body>
</html>