0

私は非常に基本的なウェブサイト テンプレートに取り組んでおり、左上に固定ヘッダーがあり、左下と右下に固定された下線があります。

真ん中のコンテンツは中央にあるはずですが、何が間違っているのかよくわかりません。

height: 100%質問 1.) css プロパティを削除すると、垂直方向のセンタリングが機能しないのはなぜですか?

質問 2.)height: 100%が html タグで宣言されている場合、サイトが 100% よりも大きく、ブラウザー ウィンドウを超えているのはなぜですか?

質問 3.) はbottom-left正しく表示されるのに、なぜ表示されないのbottom-rightですか?

質問 4.) with が 100% に設定され、テキストが右揃えの場合、テキストはブラウザの右フレームから始まり、左に伸びるべきではありませんか? なぜブラウザウィンドウを拡張するのですか?

助けてくれてありがとう。コードは下に表示されます

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height:100%;
}

body {
    height: 100%;
    margin-left: 20px;‚
}

.title {
    position: absolute;
    top: 20px;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}

/* Center Text Section */

.area {
  width: 100%;
  height: 100%;
  position: relative;
}

.middlespace {
  position: absolute;
  left: 50%;
  top: 50%;
  display: table;
}

.middlespace p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.exhibitionindex {
    text-align: center;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
}

.bottom-left {

    position: absolute;
    bottom: 15px;
    text-align: left;
}

.bottom-right {
    position: absolute;
    bottom: 15px;
    text-align: right;
}

.exhibitiontitle {
    color: #d4d4d4;
    font-style: italic;
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
}

.bold {
    font-family: serif;
}


.about {
    font-size: 11px;
}

.contact {
    font-size: 11px;
}

.openinghours {
    font-style: italic;
    color: #8e8e8e;
    font-size: 11px;
}

</style>

<title>Website Title</title>

</head>
<body>
    <div class="title">Logo / Title Text</div>

    <div class="area">
        <div class="middlespace">
            <p>27. April 2012</p>
        </div>
    </div>
    <div class="bottom-left">
        <span class="about"><span class="bold">XYZ</span> is a project by Person One, Person Two, Person Three&nbsp;&nbsp;&#124;&nbsp;</span>
        <span class="contact">Website Information &mdash; <a href="mailto:info@info.com">info@info.com</a></span>
    </div>
    <div class="bottom-right"><span class="openinghours">Opening Hours Information</span></div>
</body>
</html>
4

1 に答える 1

3

質問 1.) height: 100% css プロパティを削除すると、垂直方向のセンタリングが機能しないのはなぜですか?

デフォルトでは、htmlおよびbody要素はコンテンツに合わせて高さを拡張します。したがって、高さを設定しないhtmlと、スタイル設定されたコンテンツを含めるために必要な高さしかありません。さらに、絶対配置要素は親のサイズに影響しません。高さを 100% に設定しareaないと、ウィンドウ全体の高さにもならないため、ページ上部の小さなストリップで垂直方向に中央揃えになります。

質問 2.) 高さ: 100% が html タグで宣言されている場合、サイトが 100% よりも大きく、ブラウザー ウィンドウを超えているのはなぜですか?

それだけでは、ページの境界を超えることはありません。ただし、100% 要素に余白、境界線、または同様の属性を追加すると、これらが 100% 要素に追加され、要素がウィンドウの端を超えて拡張されます。

質問 3.) 左下は正しく表示されるのに、右下が表示されないのはなぜですか?

これらの要素を完全に配置しています。div 要素は通常、親要素の幅の 100% です。ただし、絶対に配置すると、コンテンツに合わせて幅が縮小されます。あなたの場合、デフォルトで左揃えtext-alignの内にしようとしています。divはテキストと同じ大きさにすぎないため、div左揃え、右揃え、中央揃えはすべて同じに見えます。既にdivs を絶対配置しているため、絶対配置を使用してそれらを整列させます。

.bottom-left {
    position: absolute;
    bottom: 15px;
    left: 15px;
}
.bottom-right {
    position: absolute;
    bottom: 15px;
    right: 15px;
}
于 2012-05-15T17:47:43.157 に答える