Question

我是一个新的编码器，我不知道为什么每次我做一个div或类，它自动使我的网站更宽。我把立场定为相对......

我希望你们明白这一点

＆＃13;

html,body { 
    height: 100%;
    width: 100%;
    margin: 0px;
}

h3#hvemerjeg{
    position: relative;
    left: 200px;
    font-weight: 100;
    padding: 0;
    margin: auto 0;
}

h3#hvorformulti {
}

h1{ 
        text-align: center;
		font-size: 30px;
        color: black;
        display: block;
        top: -32px;
		font-family: fantasy; 
	}
p#infotekst {
        text-align: center;
        width: 20%;
        font-size: 15px;
        position: relative;
        padding: 1%;
        left: 10%;
        border-style:hidden;
        border-width: 5px;
        border-color: #ff5050;
}
#multitekst {
        text-align: center;
        width: 20%;
        max-width: 20%;
        font-size: 15px;
        position: relative;
        padding: 1%;
        left: 30%;
        top: -340px;
        border-style:hidden;
        border-width: 5px;
        border-color: #ff5050;
    
}
a { text-decoration: none;
	
}

#logohead {
	position:absolute;
	top: 10px;
	left: 10px;
	margin: 0px;
    padding: 0px;
	width: 12%;
	
	
}
.sect { 
        display: block;
        height: 100%;
        width: 100%;
        background-size:cover; 
        background-repeat: no-repeat;

}
.subSection { 
        height: 450px;
        background-color: white;
        background-repeat: no-repeat;
}
.sectOne {
        background-image: url(image/forside.png);
    
}
.sectTwo {
        background-color: aqua;
    
}
   
.sectThree {
    
    
}
footer {
	background-color: black; 
	color: white; 
	overflow:auto; 
	padding-bottom: 1%; 
    height:10%;
}
#footerlogo {
	padding: 1%;  
	padding-left: 3%; 
	display:block; 
	float: left; 
}
.footertekst {
	font-family: 'Trirong', serif;
	padding-left: 30%; 
	float:right;  
	font-size: 15px; 
	position: absolute; 
}

.socialemedier {
	position:relative; 
	padding-left: 75%; 
	display: block; 	
}

.ikoner {
	padding-left: 5%; 
}

＆＃13;

<!DOCTYPE html>
<html>
<title> MultimediaDesigner Hamzeh Khan </title>
<meta name="description" content="Jeg Hamzeh Khan, studere multimediadesigner på århus erhvervsakademi på 1 semester, gennem uddannelse vil jeg få et større forståelse indenfor det digitale verden, og konsturere dem videre til virkeligheden">
<meta name="author" content=" Made by Hamzeh Khan">    
<meta name="keywords" content=" Design, multimediadesigner, konceptudvikler, webdesign">   
    
<head>        
        <meta charset="utf-8">
        <meta name="description" content="Jeg Hamzeh Khan, studere multimediadesigner på århus erhvervsakademi på 1 semester, gennem uddannelse vil jeg få et større forståelse indenfor det digitale verden, og konsturere dem videre til virkeligheden">
        <link rel="stylesheet" type="text/css" href="style.css">
        
</head>  
<header>   
    </header>    
<style>         
    h2 {
        text-align: center;
        font-size: 40px;        
    }

	p {
		text-align: center;	
	}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow:hidden;
    background-color:#000000;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: grey;
}

.active {
    background-color:#FF5050;
}
    
</style> 
    
<body>
    <a href="index.html">
    <img id="logohead" src="image/logokhan.png" alt="headlogo" style="width:10%;height:30px;border:3%">
    </a>
    <ul>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="mywork.html">Mywork</a></li>
        <li><a class="active" href="index.html">Home</a></li>
    </ul>

           
        <div class="sect sectOne">

<article>

</article>
    
    </div>

                  <div class="subSection"> 
                    <br>
                    <h1> test 1 1  </h1>
                          <h3 id="hvemerjeg"> Hvem er jeg ? </h3>
                          <p id="infotekst">
                            Jeg hedder Hamzeh Seyed og studere multimediadesign på 1 semester på Erhvervsakademi i Århus. Jeg er 22 år gammel, og bor i Kolding sammen med en Roomie og pendler til skolen hverdag kl. 05.30 om morgen. Jeg har store forventninger til mig selv ifølge uddannelsen og vil derfor gennem de næste 3 næste semester vil jeg få et langt større forståelse indenfor den digitale verden end jeg har nu.

                        I min fritid er jeg for det meste sammen med mine nærmeste omgivelser, og bruger det meste af tiden på at optage video og tager masser billeder, primært af naturen.   
                              
                              
                          </p>
                          
                           <h3 id="hvorformulti"> Hvorfor Multimedia Design </h3>
                           <p id="multitekst"> 
                        Af baggrund af de uddannelser jeg var været igennem, så føler jeg mig meget til rette i den uddannelse jeg læser nu, da jeg er den kreative/innovative person der har forståelse i den teknologis verden, og mener at der er meget jeg kan byde ind på. 

                        Når det gælder om design, er jeg den person der godt kan lide at tænke ud af boksen, og improvisere noget der ikke findes. 
                        Jeg bruger meget af min tid bag computer, hvor jeg kommer ind på nye hjemmeside hver eneste dag, og lære indtil hvordan deres struktur egentlig er, og hvordan det kan videreudvikles til noget bedre.  
                          </p>
                          
                          
    </div>
                          
                          </p>
                 
                    <div class="sect sectTwo"> 
 
	</div>
    
       <footer>
	<img id="footerlogo" src="image/KhanDESIGN.png" alt="headlogo" style="width:5%;height:10%;">
	<div>
		<br>
		<h4 class="footertekst"> Kontaktes på </h4>
	</div>
	
	<div class="socialemedier">
		<a href="https://www.facebook.com/hamzeh.iipp"><img class="ikoner" src="image/facebookicon.png" alt="facebookicon" style="width: 10%;"></a> 
		<a href="https://www.instagram.com/khaain/"><img class="ikoner" src="image/instagramicon.png"  alt="instagramicon
            "style="width: 10%;"></a>
		<a class="tooltip" href="mailto:hslipp@hotmail.com"><img class="ikoner" src="image/mailicon.png" alt="mailicon" style="width: 10%;"><span class="tooltiptext"></span></a>
   

 

<br>    
<br> 
<br>    
<br>   
    

    
    
</body>
</html>

＆＃13;

正如你在图片中看到的那样，我的div属于我的网站范围，/橙色，并且我已经将我的网站给了我100％的宽度，但每次我制作一个div，它都是范围。 ] 1] 1

我是一个新的编码器，我不知道为什么每次我做一个div或类，它自动使我的网站更宽。我已将该职位设定为相对

Answer 1

发生了什么，是你创建了一个自然定位的块元素（#hvemerjeg）。

使用position：relative移动元素时，此元素（#hvemerjeg）会退出页面并创建水平滚动条。

橙色区域显示，由于块元素默认具有父级宽度，因此当您限制其宽度时，此额外宽度将显示为边距（橙色）。（这就像它们显示的那样，与你的问题无关。）

对此的一个解决方案是设置“width：calc（100％ - 200px）;”这个元素。

其他解决方案是设置overflow-x：hidden;到这个元素的父元素。

一般来说，使用相对定位来制作页面布局是一个非常糟糕的主意：）

我的div从网站宽度出来？

1 个答案: