我正在开发我的作品集网站，但遇到了问题。一旦我想要多层（你必须看到才能理解这一点），它们的排列完全不同。
我对图像使用了相同的像素大小。重要提示：我只能对图像和内容周围的 div 使用像素。因为我需要使用@media 来更改我手机的页面，所以我需要以百分比形式完成其他所有操作。
仅当我的左侧有图像时才会出现此问题。因为我尝试在第二层下面再放一层，并且图像在右侧，没有任何问题。它的宽度和边距与第一层相同。
/*
Opdracht: PROJECT 1
Auteur: Diego Cubero van Coevorden
Aanmaakdatum: 14-1-2020
Bestandsnaam: stylesheet.css
*/
#workspace
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 1000px;
height: 670px;
}
#workspace2
{
display: block;
margin: auto;
width: 1000px;
height: 670px;
}
#greyworkspace
{
display: block;
margin-left: auto;
margin-right: auto;;
width: 1000px;
height: 670px;
}
#foto
{
height: 100%;
}
#contentgrey
{
float: right;
height: 100%;
width: 75%;
background-color: rgb(215,212,212);
}
#image2
{
width: 25%;
height: 100%;
float: left;
}
#image3
{
width: 25%;
height: 100%;
float: right;
}
#image
{
width: 25%;
height: 100%;
float: right;
}
#content
{
float: left;
height: 100%;
width: 75%;
background-color: rgb(32,32,32);
}
#content2
{
float: left;
height: 100%;
width: 75%;
background-color: rgb(32,32,32);
}
#kw1cp
{
color: black;
font-size: 18px;
float: left;
margin-left: 30px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
#kw1c
{
color: black;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 50px;
margin-bottom: 0px;
}
#kw1cw
{
color: white;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 50px;
margin-bottom: 0px;
}
/* Verticale navigatiebar hobby's */
#hobbylist {
list-style-type: none;
margin-top: 300px;
margin-left: 40px;
padding: 0;
width: 100px;
height: 100px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
/*Einde navigatie hobby's */
p
{
color: white;
font-size: 18px;
float: left;
margin-left: 30px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
#tekstzwart
{
color: black;
font-size: 18px;
float: left;
margin-left: 30px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
#left
{
float: left;
}
#right
{
float: left;
margin-left: 70px;
}
#tekstzwartlang
{
color: black;
font-size: 18px;
float: left;
margin-left: 30px;
width: 800px;
font-family: 'Arial';
margin-top: 20px;
}
#tekstwitlang
{
color: white;
font-size: 18px;
float: left;
margin-left: 30px;
width: 800px;
font-family: 'Arial';
margin-top: 20px;
}
#bold
{
font-weight: bold;
}
h1
{
color: white;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 30px;
margin-bottom: 0px;
}
#naam {
color: white;
font-size: 56px;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 80px;
margin-bottom: 0px;
}
#cambridge
{
height: 300px;
width: 300px;
}
#school
{
height: 200px;
width: 300px;
}
#greya
{
text-decoration: underline;
color: black;
}
#whitea
{
text-decoration: underline;
color: white;
}
nav
{
display: block;
float: left;
margin-top: 65px;
margin-left: 0px;
}
#beroep
{
color: white;
font-size: 18px;
float: left;
margin-left: 200px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
nav ul
{
float: left;
}
nav ul li
{
float: left;
list-style: none;
position: relative;
}
nav ul li a
{
font-family: 'Arial Black';
display: block;
text-decoration: none;
padding: 14px 28px 14px 0px;
color: white;
}
#active
{
text-decoration: underline;
}
nav ul li ul
{
display: none;
position: absolute;
padding-left: 0px;
}
nav ul li:hover ul
{
display: block;
}
nav ul li ul li
{
width: 108px;
}
nav ul li ul li a
{
padding: 0px 28px 0px 0px;
color: white;
background-color: rgb(32,32,32);
}
nav ul li ul li a:hover
{
background-color: darkgrey;
}
<!DOCTYPE html>
<html>
<head>
<title>Project 1 - Werkervaring</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="utf-8">
<link href="./CSS/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="workspace">
<div id="content">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Opleidingen.html">Opleidingen</a></li>
<li><a href="Werkervaring.html" id="active">Werkervaring</a></li>
<li><a href="Hobby.html">Hobby's</a></li>
<li><a href="">Producten</a>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
<li><a href="#">Project 5</a></li>
<li><a href="#">Project 6</a></li>
<li><a href="#">Project 7</a></li>
<li><a href="#">Project 8</a></li>
</ul>
</li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<h1>Heinde & Ver</h1>
<p>Houttuinlaan 1B<br>Woerden<br><a href="https://www.heindever.nl/" target="_blank" id="whitea">Officiële website</a></p>
<p>Mijn eerste echte baantje was bij Heinde & Ver. Ik begon daar toen ik 15 jaar oud was. Ik heb daar ongeveer 9 maanden gewerkt. Ik werkte als kok. Ik begon met het maken van toetjes en voorgerechten, maar ben doorgegroeit tot hoofdgerechten. Ik vond het een hele leuke ervaring, maar de loon viel mij tegen. </p>
<img src="Afbeeldingen/Heinde.jfif" id="school">
</div>
<div id="image">
<img id="foto" src="https://i.imgur.com/zJYrcg0.jpg">
</div>
</div>
<div id="greyworkspace">
<div id="image2"><img src="https://i.imgur.com/G9Lya2A.jpg" id="foto"></div>
<div id="contentgrey">
<h1 id="kw1c">The Sting</h1>
<p id="tekstzwart">Hollandse Toren 9<br>
Utrecht<br>
<a href="https://www.thesting.com/nl-nl" id="greya" target="_blank">Officiële website</a></p>
<p id="tekstzwart">Ik ging bij The Sting werken op mijn zestiende toen ik net weg was bij Heinde & Ver. Ik was in een winkel gevraagd of ik al een baantje had en toen had ik besloten te solliciteren bij The Sting in Utrecht. Ik werk hier nu al 1,5 tot 2 jaar met veel plezier. Ik heb hier veel geleerd hoe je klanten kunt helpen en hoe je moet verkopen.</p>
<img src="Afbeeldingen/Sting.jpg" id="school">
</div>
</div>
</body>
</html>
我找到了解决问题的方法。
我给了我的“工作空间”一个高度和宽度。
我给了我的“内容”和“图像”高度和宽度。
我给我的“照片”一个高度，BUT不是宽度。
一旦我给它100%的宽度，问题就不再出现了。
/*
Opdracht: PROJECT 1
Auteur: Diego Cubero van Coevorden
Aanmaakdatum: 14-1-2020
Bestandsnaam: stylesheet.css
*/
#workspace
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 1000px;
height: 670px;
}
#workspace2
{
display: block;
margin: auto;
width: 1000px;
height: 670px;
}
#greyworkspace
{
display: block;
margin-left: auto;
margin-right: auto;;
width: 1000px;
height: 670px;
}
#foto
{
height: 100%;
width: 100%;
}
#contentgrey
{
float: right;
height: 100%;
width: 75%;
background-color: rgb(215,212,212);
}
#image2
{
width: 25%;
height: 100%;
float: left;
}
#image3
{
width: 25%;
height: 100%;
float: right;
}
#image
{
width: 25%;
height: 100%;
float: right;
}
#content
{
float: left;
height: 100%;
width: 75%;
background-color: rgb(32,32,32);
}
#content2
{
float: left;
height: 100%;
width: 75%;
background-color: rgb(32,32,32);
}
#kw1cp
{
color: black;
font-size: 18px;
float: left;
margin-left: 30px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
#kw1c
{
color: black;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 50px;
margin-bottom: 0px;
}
#kw1cw
{
color: white;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 50px;
margin-bottom: 0px;
}
/* Verticale navigatiebar hobby's */
#hobbylist {
list-style-type: none;
margin-top: 300px;
margin-left: 40px;
padding: 0;
width: 100px;
height: 100px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
/*Einde navigatie hobby's */
p
{
color: white;
font-size: 18px;
float: left;
margin-left: 30px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
#tekstzwart
{
color: black;
font-size: 18px;
float: left;
margin-left: 30px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
#left
{
float: left;
}
#right
{
float: left;
margin-left: 70px;
}
#tekstzwartlang
{
color: black;
font-size: 18px;
float: left;
margin-left: 30px;
width: 800px;
font-family: 'Arial';
margin-top: 20px;
}
#tekstwitlang
{
color: white;
font-size: 18px;
float: left;
margin-left: 30px;
width: 800px;
font-family: 'Arial';
margin-top: 20px;
}
#bold
{
font-weight: bold;
}
h1
{
color: white;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 30px;
margin-bottom: 0px;
}
#naam {
color: white;
font-size: 56px;
float: left;
margin-left: 30px;
width: 600px;
font-family: 'Arial Black';
margin-top: 80px;
margin-bottom: 0px;
}
#cambridge
{
height: 300px;
width: 300px;
}
#school
{
height: 200px;
width: 300px;
}
#greya
{
text-decoration: underline;
color: black;
}
#whitea
{
text-decoration: underline;
color: white;
}
nav
{
display: block;
float: left;
margin-top: 65px;
margin-left: 0px;
}
#beroep
{
color: white;
font-size: 18px;
float: left;
margin-left: 200px;
width: 400px;
font-family: 'Arial';
margin-top: 20px;
}
nav ul
{
float: left;
}
nav ul li
{
float: left;
list-style: none;
position: relative;
}
nav ul li a
{
font-family: 'Arial Black';
display: block;
text-decoration: none;
padding: 14px 28px 14px 0px;
color: white;
}
#active
{
text-decoration: underline;
}
nav ul li ul
{
display: none;
position: absolute;
padding-left: 0px;
}
nav ul li:hover ul
{
display: block;
}
nav ul li ul li
{
width: 108px;
}
nav ul li ul li a
{
padding: 0px 28px 0px 0px;
color: white;
background-color: rgb(32,32,32);
}
nav ul li ul li a:hover
{
background-color: darkgrey;
}
<!DOCTYPE html>
<html>
<head>
<title>Project 1 - Werkervaring</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="utf-8">
<link href="./CSS/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="workspace">
<div id="content">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Opleidingen.html">Opleidingen</a></li>
<li><a href="Werkervaring.html" id="active">Werkervaring</a></li>
<li><a href="Hobby.html">Hobby's</a></li>
<li><a href="">Producten</a>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
<li><a href="#">Project 4</a></li>
<li><a href="#">Project 5</a></li>
<li><a href="#">Project 6</a></li>
<li><a href="#">Project 7</a></li>
<li><a href="#">Project 8</a></li>
</ul>
</li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<h1>Heinde & Ver</h1>
<p>Houttuinlaan 1B<br>Woerden<br><a href="https://www.heindever.nl/" target="_blank" id="whitea">Officiële website</a></p>
<p>Mijn eerste echte baantje was bij Heinde & Ver. Ik begon daar toen ik 15 jaar oud was. Ik heb daar ongeveer 9 maanden gewerkt. Ik werkte als kok. Ik begon met het maken van toetjes en voorgerechten, maar ben doorgegroeit tot hoofdgerechten. Ik vond het een hele leuke ervaring, maar de loon viel mij tegen. </p>
<img src="Afbeeldingen/Heinde.jfif" id="school">
</div>
<div id="image">
<img id="foto" src="https://i.imgur.com/zJYrcg0.jpg">
</div>
</div>
<div id="greyworkspace">
<div id="image2"><img src="https://i.imgur.com/G9Lya2A.jpg" id="foto"></div>
<div id="contentgrey">
<h1 id="kw1c">The Sting</h1>
<p id="tekstzwart">Hollandse Toren 9<br>
Utrecht<br>
<a href="https://www.thesting.com/nl-nl" id="greya" target="_blank">Officiële website</a></p>
<p id="tekstzwart">Ik ging bij The Sting werken op mijn zestiende toen ik net weg was bij Heinde & Ver. Ik was in een winkel gevraagd of ik al een baantje had en toen had ik besloten te solliciteren bij The Sting in Utrecht. Ik werk hier nu al 1,5 tot 2 jaar met veel plezier. Ik heb hier veel geleerd hoe je klanten kunt helpen en hoe je moet verkopen.</p>
<img src="Afbeeldingen/Sting.jpg" id="school">
</div>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
