概述div和图像

Question

我正在我的投资组合网站上工作，但是有问题。一旦我想要多层（您必须要了解这一点），它们的排列就会完全不同。

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

Answer 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>