0

我正在尝试将我的主页分为两个区域，一个在上面（白色），另一个在下面（黑色）。

该页面旨在以 50% 垂直分割，并且工作正常。

两个区域都有一个标题，顶部的白色区域（应该在它的底部有标题），而下面的黑暗区域应该在它的上面有标题。这样，两个标题就位于页面的中心。

我唯一的问题是我找不到方法来降低上部区域的标题。最快的方法是使用 padding-top 和 %，但是这样填充会导致页面宽度的 % 而不是它的高度。

你知道如何解决这个问题吗？

HTML

<div>

<div style="height:50%; width:100%; background-color:#FFFFFF">
<a href="http://www.lorenzomeschini.com/architecture"; onMouseOver="this.style.color='#FCB415'" onMouseOut="this.style.color='#cccccc'" style="text-align:center; font-family:Tahoma, Geneva, sans-serif; color:#dddddd; font-size:19px; letter-spacing:0.22em; height:100%">architecture</a>
</div>

<div style="position: absolute; bottom:0;width:100%;height:50%">
<a href="http://www.lorenzomeschini.com/photography"; onMouseOver="this.style.color='#FCB415'" onMouseOut="this.style.color='#cccccc'" style="text-align:center; font-family:Tahoma, Geneva, sans-serif; color:#cccccc; font-size:19px; letter-spacing:0.21em; height:100%">photography</a>
</div>

</div>

</body>

CSS

body {
background-color: #1E1E1E;
margin: 0;
padding: 0;
color: #919191;
font-family: "Courier New", Courier, monospace;
font-size: 13px;

太感谢了

4

3 回答 3

0

制作'a'标签的父div

position:relative;

和'a'标签他们自己

position:absolute;

firat 'a' 应该是

bottom: 0;

第二个

top:0;
于 2013-10-28T18:28:42.920 回答
0

为了你的第一个标题

html（添加

)

  <div class="white-div"> <p><a href="http://www.lorenzomeschini.com/architecture" ; onMouseOver="this.style.color='#FCB415'" onMouseOut="this.style.color='#cccccc'" style="text-align:center; font-family:Tahoma, Geneva, sans-serif; color:#dddddd; font-size:19px; letter-spacing:0.22em; height:100%">architecture</a></p>

    </div>

css

.white-div p {
  text-align:center;
  width:500px;
  position:absolute;
  bottom:0;
  right : 50% ;
  margin-right:-250px;

}

p{margin:0;padding:0;}

密码笔

于 2013-10-28T18:40:22.253 回答
0

您需要position: absolutediv 并将一个放在顶部，一个放在底部，然后它应该可以工作。像这样：

.white-div {
    height: 50%;
    width: 100%;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
}
.black-div {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
}

jsfiddle：http: //jsfiddle.net/4qhQg/

注意：在处理百分比高度时，确保正文始终跨越 html 高度的 100% 也是明智的（尽管它似乎在没有这个的情况下也可以工作）：

html {
    min-height:100%;
    position:relative
}
body {
    height:100%
}
于 2013-10-28T18:18:34.877 回答