Question

我的页脚需要一些帮助。我希望我的文字在右边，但不想把它全部推到角落like this.当你将文本向右对齐或将整个div向右浮动时会发生这种情况。保证金将是一个解决方案但是当我使我的屏幕变小时，文本消失，因为文本因边距而无法移动。这就是为什么我试图将文本放在div中，我将其设置为屏幕的25％。因此，文本总是占据屏幕的25％。但不幸的是，这仍然无法解决我的问题，因为当你缩小屏幕时，所有的文字现在都被推到了底部。

有没有人为我提供有效的解决方案？

This is how the pages looks right-now（颜色就在那里，所以你可以更好地看到div）

＆＃13;

@charset "UTF-8";

body {
    background-image: url("achtergronden/hout.png");
	width: 100%;
}

html, body{
    margin: 0;
    padding: 0;
}

#Anouk {
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#Anouk img{
    display: block;
}

#header {
    height: 80px;
    background: #000000;
}

li {
	display: block;
    float: left;
}

li a {
    color: #FFFFFF;
	height: 80px;
}

#contact {
	float: right;
}

#homepagina {
	background-image: url("achtergronden/blauw.png");
	width: 100%;
	height: 473px;
}
	
#updates {
	height:1000px;
}

#laatste {
	color: #FFFFFF;
	font-family: oswald, sans-serif;
	font-size: 30px;
	text-align: center;
	text-decoration: bold 700;
}
	
#footer {
	position: relative;
}


#A {
	height: 80px;
	width: 25%;
	background: yellow;
	float: left;
}

#B {
	background: red;
	width: 25%;
	height: 80px;
	float: left;
}

#C {
	background: blue;
	width: 25%;
	height: 80px;
	float: left;
}

#D {
	background: white;
	width: 25%;
	height: 80px;
	float: left;
}

＆＃13;

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

＆＃13;

Answer 1

你可以通过向元素添加填充来简单地实现这一点，但是我会将段落包装在容器元素中并向左右添加填充。现在你的文字不会被推到角落里。

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>

在缩小屏幕时移动文本页脚

1 个答案: