概述div和图像 [英] Outlining divs and images

查看：85
本文介绍了概述div和图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am working on my portfolio website, and I have a problem. Once I want multiple layers (you'll have to see to understand this) they line out totally different.

我为图像使用了相同的像素大小.重要提示:我只能将像素用于图像和内容周围的div.因为我需要使用@media来更改手机的页面，所以我需要按百分比执行其他所有操作.

I used the same pixel sizes for the images. Important: I can only use pixels for the divs surrounding the images and content. Because I need to use @media to make change the page for my phone, so I need to do everything else in percentages.

仅当我左侧有图像时，才会出现此问题.因为我尝试在第二层下面放置另一层，并且图像在右边没有任何问题.它具有与第一层相同的宽度和边距.

This problem only occurs when I have an image on the left. Because I tried putting another layer under the second one and had the image on the right without any problem. It had the same width and margins as the first layer.

/*
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>

推荐答案

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

I found the solution to my problem.

我给我的工作区"一个高度和一个宽度. 我给了我的内容"和图像"一个高度和一个宽度. 我给我的照片"一个高度，但是一个宽度. 一旦我给它100％的宽度，问题就不再发生了.

I gave my "workspace" a height and a width. I gave my "content" and "image" a height and a width. I gave my "foto" a height, BUT not a width. Once I gave it 100% width, the problem didn't occur anymore.

/*
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>

这篇关于概述div和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆