2

我正在我的投资组合网站上工作，但我遇到了问题。一旦我想要多层（你必须看到才能理解这一点），它们的排列方式就完全不同了。

我对图像使用了相同的像素大小。重要提示：我只能将像素用于围绕图像和内容的 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>

4

1 回答 1

1

我找到了解决我的问题的方法。

我给了我的“工作区”一个高度和一个宽度。我给了我的“内容”和“图像”一个高度和一个宽度。我给我的“照片”一个高度，但不是一个宽度。一旦我给它 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>

于 2020-01-24T08:55:57.253 回答