程序员经验分享-hwhale

概述 div 和图像

2024-03-24

我正在开发我的作品集网站，但遇到了问题。一旦我想要多层（你必须看到才能理解这一点），它们的排列完全不同。

我对图像使用了相同的像素大小。重要提示：我只能对图像和内容周围的 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(使用前将#替换为@)

html

css

margin

outlining

概述 div 和图像 的相关文章

随机推荐

  • 我正在尝试加载或者您可以说使用 ServletConfig 接口注册我的 sql jdbc 驱动程序

    我可以从其他方式加载我的 mysql jdbc 驱动程序 但是当我尝试使用 servletconfig 接口注册它时 它给出了异常 java lang ClassNotFoundException 驱动器 虽然我知道 servletconf

  • 实时 git diff

    我通常喜欢在查看 git diff 的同时输入 git commit 消息 我非常喜欢所产生的输出这个 git 的 Perl 小插件 https github com git git tree master contrib diff hig

  • 从文本文件读取直到 EOF 重复最后一行[重复]

    这个问题在这里已经有答案了 下列C 代码使用ifstream对象从文本文件 每行一个数字 读取整数 直到它命中EOF 为什么它会读取最后一行的整数两次 如何解决这个问题 Code include

  • 使用 Linq 进行数学统计

    我有一个收藏person对象 IEnumerable 每个人都有一个age财产 我想生成该年龄属性的集合统计信息 例如最大值 最小值 平均值 中值等 使用 LINQ 执行此操作最优雅的方法是什么 这是 Median 的完整通用实现 它可以正

  • 混合 C++/CLI TypeLoadException 内部限制：字段过多

    为了将一些新的 UI 迁移到托管 C 领域 我最近在一个大型旧项目上启用了公共语言运行时支持 clr 该项目在共享 DLL 中使用 MFC 并依赖于我们的大约十几个其他项目 整体解决方案 该项目是我们应用程序的核心 并将驱动生成的任何托管

  • Android 避免 OnResume

    我有 3 个基于 Activity 的应用程序 其工作流程如下MainActivity ListView and DetailView 当onResume事件触发时 需要调用MainActivity 不去其他两项活动 有什么办法可以打电话吗

  • 如何修复 npm WARN 配置全局 `--global`、`--local` 已弃用。使用 `--location=global` 代替

    你如何解决这个问题 Nodejs npm 和 npx 问题 https i stack imgur com 0D9Qv png 当我尝试在命令提示符下安装或检查任何内容时 Node js通过 npm WARN 配置全局 global loc

  • R - 如何确定一周结束日期

    可以说我有以下数据框 df lt structure data frame date c 2014 11 04 2014 11 12 2014 11 17 volume c 5 10 2 这将返回 date volume 2014 11 0

  • wix 主要升级未安装所有文件

    我有一个非常简单的 WiX 项目 版本 3 7 它安装一些文件 NET 程序版本 6 0 0 0 我准备使用 WiX 中的 MajorUpgrade 功能发布新版本 6 0 1 0 我在 Product 元素中保持 UpgradeCode

  • 爪哇。实现侦听器的正确模式

    我经常遇到的情况是 给定的对象需要有许多侦听器 例如 我可能有 class Elephant public void addListener ElephantListener listener 但我会遇到很多这样的情况 也就是说 我也会有一

  • ClientScript.RegisterStartupScript()

    ClientScript RegisterStartupScript 和 ClientScript RegisterClientScriptBlock 有什么区别 ClientScript RegisterStartupScript 用于传

  • groovy 执行时参数包含空格

    如何向 groovy 中字符串的执行方法提供包含空格的参数 仅仅像在 shell 中那样添加空格并没有帮助 println ls tmp folder with spaces execute text 这会给 ls 调用带来三个错误的参数

  • 如何从这些输出中获取实际的函数名称

    我使用 boost 测试进行单元测试 使用 gcov 和 lcov 来测量覆盖范围 不幸的是 genhtml 生成类似函数覆盖率的报告 我现在想知道有什么功能 ZN7UtilLib11ProgressBarC2EjdRSo实际上是 到目前为

  • java.lang.SecurityException：需要 ACCESS_FINE_LOCATION 或 ACCESS_COARSE_LOCATION 权限

    我正在开发一个 android 我想使用 NETWORK PROVIDER 获取用户位置 我没有使用 GPS 来实现此目的 我收到以下异常 java lang SecurityException 需要 ACCESS FINE LOCATIO

  • 从 void* 到 char** 的转换无效

    自从我搞乱 C 代码以来已经有一段时间了 在 Ubuntu 下使用 gcc 编译 C 代码时出现以下错误 我用来编译代码的命令是 如果这些错误是由于我使用的编译器造成的 请让我知道如何消除该错误 gcc o runnable mycode

  • C 中的 sizeof(array)：分段错误 [重复]

    这个问题在这里已经有答案了 嗨 我从这段代码中得到了一个奇怪的分段错误 int main void int array1 10000000 int n sizeof array1 printf d n n return 0 但是如果我改变

  • 数据绑定编译器错误：“无法解析 SafeVarargs 的类型”

    我已经尝试让 Android 数据绑定正常工作两天了 编译器问题接二连三地出现 现在我完全碰壁了 我用谷歌搜索了这个 但没有找到任何东西 这是完整的日志 java lang RuntimeException failure see logs

  • Visual Studio 2015 调用堆栈显示

    最近在我的计算机上全新安装了 Windows 10 Pro 后 我注意到每当我中断程序并打开调用堆栈时 调用堆栈都会显示应用程序名称和行号 但函数名称显示为

  • 寻找 2 个以上整数的 GCD（最大公约数）？

    我已经有一个函数可以找到 2 个数字的 GCD function getGCDBetween a b while b 0 m a b a b b m return a 但现在 我想扩展这个函数来找到 N 点的 GCD 有什么建议吗 有一种更

  • 概述 div 和图像

    我正在开发我的作品集网站 但遇到了问题 一旦我想要多层 你必须看到才能理解这一点 它们的排列完全不同 我对图像使用了相同的像素大小 重要提示 我只能对图像和内容周围的 div 使用像素 因为我需要使用 media 来更改我手机的页面 所以我

热门标签