0

ホームページを上 (白) と下 (黒) の 2 つの領域に分割しようとしています。

ページは 50% で垂直に分割されるように意図されており、正常に機能します。

両方の領域にタイトルがあり、上部の白い領域 (タイトルは下側にある必要があります) に対して、下の暗い領域にはタイトルが上側にある必要があります。このように、2 つのタイトルがページの中央に表示されます。

私の唯一の問題は、上部領域のタイトルを下げる方法が見つからないことです。最も速い方法は 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

あなたの最初のタイトルダウンのために

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

「a」タグの親 div を作成します

position:relative;

および「a」タグはそれらのスリーブ

position:absolute;

フィラート「a」は

bottom: 0;

そして2番目

top:0;
于 2013-10-28T18:28:42.920 に答える
0

position: absolutediv を作成し、1 つを上に、もう 1 つを下に配置する必要があります。そのようです：

.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 に答える