Question

CSS初学者在这里。正如您从代码中看到的那样，我希望“简介”和“内容”与顶部保持相同的距离，但“简介”正在逐渐降低。

以下是输出的屏幕截图：

screenshot

代码

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

Answer 1

给.indexer一个宽度，浮动它，然后从.poster中删除左边的填充，所以（猜测 - 调整宽度，调整到适合）：

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

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

此外，您不需要“display：block”，因为div默认为block-level elements。

Answer 2

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

Answer 3

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

    }

不同类的两个元素没有正确对齐

代码

3 个答案: