Question

我想要在页面左侧显示红色图像，但我认为存在某种边距，因为我无法将其置于角落。空的空间与我的菜单栏中的图像一起排列，但这是另一个div。有谁知道如何将图像放到页面右侧？

＆＃13;

@charset "UTF-8";

/* algemene opmaak en instellingen body --------------------------------------------------------------------- */
body {
    background-image: url("achtergronden/hout.png");
	width: 100%;
}

html, body{
    margin: 0;
    padding: 0;
}

/* logo ----------------------------------------------------------------------------------------------------- */
#Anouk {
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#Anouk img{
    display: block;
}

/* menubalk ------------------------------------------------------------------------------------------------- */
#header {
    height: 80px;
    background: #000000;
}

li {
	display: block;
    float: left;
}

li a {
    color: #FFFFFF;
	height: 80px;
}

#contact {
	float: right;
}

/* blauwe stuk pagina homepage en portfolio ----------------------------------------------------------------- */
#homepagina {
	background-image: url("achtergronden/blauw.png");
	width: 100%;
	height: 485px;
}

/* updates -------------------------------------------------------------------------------------------------- */	
#updates {
	height:1000px;
}

#laatste {
	color: #FFFFFF;
	font-family: oswald, sans-serif;
	font-size: 30px;
	text-align: center;
	text-decoration: bold 700;
}

/* footer --------------------------------------------------------------------------------------------------- */	
#footer {
	height: 85px;
	width: 100%;
	background: #000000;
	color: #FFFFFF;
	text-align: right;
}

#facebook img {
	margin-top: 7px;
	padding: 0;
}

#email img {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------------------------------------- */

＆＃13;

<body>
        	
            <div id="Anouk"><img src="logo/Hout2.png" width="100%" alt="Logo"/></div>
        	
            <div id="header">
				<div id="menu">
            		<!--Home-->
                    <li id="home">
                    	<a href="index.html">
                        	<img src="Iconen/menu/home.png" height="80px" alt="home" 
                    		onmouseover="this.src='iconen/menu/home2.png'" 
                            onmouseout="this.src='iconen/menu/home.png'"/>
                    	</a>
                    </li>
                    <!--Over Mij-->
					<li id="over">
                    	<a href="over.html">
                        	<img src="iconen/menu/over.png" height="80px" alt="over mij" 
                    		onmouseover="this.src='iconen/menu/over2.png'" 
                            onmouseout="this.src='iconen/menu/over.png'"/>
                       	</a>
                    </li>
					<!--Portfolio-->
                    <li id="portfolio">
                    	<a href="portfolio.html">
                        	<img src="iconen/menu/portfolio.png" height="80px" alt="portfolio" 
                            onmouseover="this.src='iconen/menu/portfolio2.png'" 
                            onmouseout="this.src='iconen/menu/portfolio.png'"/>
                    	</a>
                    </li>
            		<!--Contact-->
                    <li id="contact">
                    	<a href="contact.html">
                        	<img src="iconen/menu/contact.png" height="80px" alt="contact" 
                            onmouseover="this.src='iconen/menu/contact2.png'" 
                            onmouseout="this.src='iconen/menu/contact.png'"/>
                        </a>
                  	</li>                    
				</div>
			</div>
            
            <div id="homepagina">
				<a href="#">
                <img src="iconen/portfolio/html.png" height="25px" alt="home"
                onmouseover="this.src='iconen/portfolio/html2.png'" 
                onmouseout="this.src='iconen/portfolio/html.png'"> 
                </a>
            </div>
            
            <div id="updates">
            	<p id="laatste">Laatste Updates</p>
         	</div>
            
            <div id="footer">
                <p id="facebook"> 
                	<a href="https://www.facebook.com/..." target="_blank">
                    	<img src="iconen/footer/facebook.png" height="25px" alt="home"
                        onmouseover="this.src='iconen/footer/facebook2.png'" 
                        onmouseout="this.src='iconen/footer/facebook.png'"> 
                    </a>
               	</p>
            	<p id="email"> 
                  	<a href="mailto:....">
                        <img src="iconen/footer/email.png" height="25px" alt="home" 
                        onmouseover="this.src='iconen/footer/email2.png'" 
                        onmouseout="this.src='iconen/footer/email.png'"> 
                    </a>
                </p>
            </div>        	
    	</body>

＆＃13;

Answer 1

漂浮后你应该清楚：

1.首先将“clearfix”类添加到<div id="menu"> - <div id="menu" class="clearfix">

2.之后添加你的风格：

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

您还有另一种清算方法 - 将高度添加到<div id="menu">或添加width:100%; overflow:hidden;。但是第一种带有clearfix的方法是最好的。

Answer 2

在导航栏之后为div添加类clear（即，您需要清除导航栏中使用的浮点数）。为此，只需在导航栏后添加以下代码

<div class="clear"><!--Clear both--></div>

CSS：

.clear{
   clear: both;
}

Answer 3

浮动后你必须清除。

<div class="clear">
<style>
clear: both;
</style>

无法将图片留在页面左侧

3 个答案: