1

CSS初心者です。コードからわかるように、「Introduction」と「Contents」を上から同じ距離にしたいのですが、「Introduction」はそれ自体で下に下がっています。

出力のスクリーンショットを次に示します。

スクリーンショット

コード

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

        body {
            background: #e7e6e1;
            font-family: Georgia, 'Times New Roman';
            font-size: 16px;
            line-height: 150%;
            color: #333;
        }

        index {
            display: block;
            margin: 20px;
            font-size: 25px
        }

        h1 {
            color: #0E0B06;
            font-weight: normal;
            margin-bottom: 0px;
        }

        h2 {
            color: #0E0B06;
            font-size: 15px;
            font-weight: normal;
            margin-bottom: 0px;
        }

        a {
            color: #333;
            text-decoration: none;
            padding: 1px 2px;
            background: #A3A3A1;
        }

        a:hover {
            color: #0E0B06;
            background: none;
        }

        .wrapper {
            width: 520px margin: auto;
        }

        .header {
            display: block;
            margin: 30px 50px 75px 400px;
        }

        .indexer {
            display: block;
            margin: 70px 50px 75px 70px;
        }

        .poster {
            display: block;
            margin: 70px 50px 75px 400px;
            padding-bottom: 30px;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <h1><a href="main.html">Web Server</a></h1>

        <h2>Internet and Web Technology Assignment <br> by <b>Juhi Aswani</b> and <b>Kartikey Kushwaha</b></h2>
    </div>
    <div class="indexer">
        <h2><b><font size="5px">Contents</font></b></h2>
        <br>Introduction
        <br>History
        <br>Common features
    </div>
    <div class="poster">
        <h2><b><font size="5px">1. Introduction</font</b></h2>
    </div>
</div>
</body>
</html>
4

3 に答える 3

2

.indexer に幅を与えてフロートし、.poster から左側のパディングを削除します (幅を推測し、それに合わせて調整します):

    .indexer {
        width: 200px;
        float: left;
        margin: 70px 50px 75px 70px;
    }

    .poster {
        margin: 70px 50px 75px 0;
        padding-bottom: 30px;
    }

また、div はデフォルトでブロックレベルの要素であるため、「display: block」は必要ありません。

于 2012-10-05T22:14:04.403 に答える
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head> 
<style rel="stylesheet" type="text/css"> 

    body { 
        background: #e7e6e1; 
        font-family: Georgia, 'Times New Roman'; 
        font-size: 16px; 
        line-height: 150%; 
        color: #333; 
    } 

    index { 
        display: block; 
        margin: 20px; 
        font-size: 25px 
    } 

    h1 { 
        color: #0E0B06; 
        font-weight: normal; 
        margin-bottom: 0px; 
    } 

    h2 { 
        color: #0E0B06; 
        font-size: 15px; 
        font-weight: normal; 
        margin-bottom: 0px; 
    } 

    a { 
        color: #333; 
        text-decoration: none; 
        padding: 1px 2px; 
        background: #A3A3A1; 
    } 

    a:hover { 
        color: #0E0B06; 
        background: none; 
    } 

    .wrapper { 
        width: 520px margin: auto; 
    } 

    .header { 
        display: block; 
        margin: 30px 50px 75px 400px; 
    } 

    .indexer { 
    width: 200px; 
    float: left; 
    margin: 70px 50px 75px 70px; 
} 

</style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="header"> 
    <h1><a href="main.html">Web Server</a></h1> 

    <h2>Internet and Web Technology Assignment <br> by <b>Juhi Aswani</b> and <b>Kartikey  Kushwaha</b></h2> 
</div> 
<div class="indexer"> 
    <h2><b><font size="5px">Contents</font></b></h2>
    <br>Introduction 
    <br>History 
    <br>Common features 
    <h2><b><font size="5px">1. Introduction</font</b></h2> 
</div> 
</div> 
</body> 
</html>
于 2012-10-05T22:41:59.970 に答える
0 
 .poster {
        display: block;
        margin: 145px 50px 75px 400px;
        padding-bottom: 30px;

    }
于 2012-10-05T22:42:48.993 に答える