2015-10-20 66 views
0

我需要一些帮助来处理页脚。我希望我的文本在右侧,但不想将它全部推入角落like this.当将文本对齐到右侧或将整个div浮动到右侧时会发生这种情况。保证金是一个解决方案,但当我让我的屏幕变小时,文本消失,因为文本无法移动,因为保证金。这就是为什么我试图把文本放在div中,我设置为25%的屏幕。所以文本总是占用屏幕的25%。但不幸的是,这仍然不能解决我的问题,因为当你缩小屏幕时,所有的文本现在都被推到底部。当您缩小屏幕时移动文本页脚

有没有人有我的工作解决方案?

This is how the pages looks right-now(颜色就在那里,所以你可以看到的div更好)

@charset "UTF-8"; 
 

 
body { 
 
    background-image: url("achtergronden/hout.png"); 
 
\t width: 100%; 
 
} 
 

 
html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#Anouk { 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
} 
 

 
#Anouk img{ 
 
    display: block; 
 
} 
 

 
#header { 
 
    height: 80px; 
 
    background: #000000; 
 
} 
 

 
li { 
 
\t display: block; 
 
    float: left; 
 
} 
 

 
li a { 
 
    color: #FFFFFF; 
 
\t height: 80px; 
 
} 
 

 
#contact { 
 
\t float: right; 
 
} 
 

 
#homepagina { 
 
\t background-image: url("achtergronden/blauw.png"); 
 
\t width: 100%; 
 
\t height: 473px; 
 
} 
 
\t 
 
#updates { 
 
\t height:1000px; 
 
} 
 

 
#laatste { 
 
\t color: #FFFFFF; 
 
\t font-family: oswald, sans-serif; 
 
\t font-size: 30px; 
 
\t text-align: center; 
 
\t text-decoration: bold 700; 
 
} 
 
\t 
 
#footer { 
 
\t position: relative; 
 
} 
 

 

 
#A { 
 
\t height: 80px; 
 
\t width: 25%; 
 
\t background: yellow; 
 
\t float: left; 
 
} 
 

 
#B { 
 
\t background: red; 
 
\t width: 25%; 
 
\t height: 80px; 
 
\t float: left; 
 
} 
 

 
#C { 
 
\t background: blue; 
 
\t width: 25%; 
 
\t height: 80px; 
 
\t float: left; 
 
} 
 

 
#D { 
 
\t background: white; 
 
\t width: 25%; 
 
\t height: 80px; 
 
\t float: left; 
 
}
<div id="Anouk"> 
 
    <img src="logo/Hout.png" width="100%" alt="Logo" /> 
 
</div> 
 
<div id="header"> 
 
    <div id="menu"> 
 
    <!--Home--> 
 
    <li id="home"> 
 
     <a href="index.html"> 
 
     <img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" /> 
 
     </a> 
 
    </li> 
 
    <!--Over Mij--> 
 
    <li id="over"> 
 
     <a href="over.html"> 
 
     <img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" /> 
 
     </a> 
 
    </li> 
 
    <!--Portfolio--> 
 
    <li id="portfolio"> 
 
     <a href="portfolio.html"> 
 
     <img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" /> 
 
     </a> 
 
    </li> 
 
    <!--Contact--> 
 
    <li id="contact"> 
 
     <a href="contact.html"> 
 
     <img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" /> 
 
     </a> 
 
    </li> 
 
    </div> 
 
</div> 
 
<div id="homepagina"> 
 
</div> 
 
<div id="updates"> 
 
    <p id="laatste">Laatste Updates</p> 
 
</div> 
 
<div id="footer"> 
 
    <div id="A"></div> 
 
    <div id="B"></div> 
 
    <div id="C"></div> 
 
    <div id="D"> 
 
    <p id="facebook"> F = ..........</p> 
 
    <p id="email"> E = ............</p> 
 
    </div> 
 
</div> 

回答

0

你可以简单地通过添加填充到元素实现这一点,但我想包段落在容器元素中添加填充左侧和右侧的填充。现在你的文字不会被推到角落里。

This stackoverflow post可以给你更多的见解。它解释了何时使用边距和填充,还解释了它们之间的差异。

html, body { 
 
    height: 100%;; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.content { 
 
    height: 100%; 
 
    margin-top: 15px; 
 
} 
 

 
.container { 
 
    padding: 0 15px; 
 
} 
 

 
footer { 
 
    background-color: black; 
 
    color: white; 
 
    padding: 15px 0; 
 
    text-align: right; 
 
} 
 

 
p { 
 
    margin: 0; 
 
}
<div class="content"> 
 
    <div class="container"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum vero doloremque dolorem eveniet odit dolores inventore neque, praesentium quia quaerat maiores eaque, ex sapiente molestiae assumenda illum quo, aperiam! Pariatur voluptatibus, eum alias corporis commodi amet aut distinctio iure atque, animi nisi rerum quae fuga! Harum ratione corporis, neque explicabo.</p> 
 
    </div> 
 
</div> 
 
<footer> 
 
    <div class="container"> 
 
     <p id="facebook"> F = ..........</p> 
 
     <p id="email"> E = ............</p> 
 
    </div> 
 
</footer>