Question

我遇到的问题是我的布局推动div低于预期。这是一个固定的三行布局，但第二行似乎被推倒了。小提琴和下面的代码。

CSS

body, html{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    background-color:black;
}
#wrapper{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    background-color:black;
    min-width:1050px;
}
#navbar{
    width:100%;
    height:30px;
    background-color:#333333;
    padding:0px;
    margin:0px;
    font-size:0px;
}
#content{
    width:100%;
    padding:0px;
    margin:0px;
    text-align:center;
}
#contentwrapper{
    width:1000px;
    padding:0px;
    margin:0px;
    text-align:center;
    display:inline-block;
    background-color:white;
    border: 5px solid #333333;
}
#contentbottom{
    text-align:center;
    margin:0px;
    padding:0px;
    top:10px;
    position:relative;
}
#contenttopimg{
    float:left;
}
#contenttoptxt{
    font-size:large;
    font-weight:bold;
    text-align:left;
}
.navtab{
    height:20px;
    background-color:#12c5f0;
    font-weight:bold;
    text-align:center;
    display:inline-block;
    padding:3px;
    margin:0px;
    border:2px solid black;
    font-size:medium;
}
.navtab:hover{
    background-color:#213655;
    cursor:pointer;
}
.navtab a{
    text-decoration:none;
    color:black;
}

#contactwrapper{
    padding:10px;
    margin:0px;
    background-color:#333333;
    font-size:0px;
    text-align:center;
}
.contacttitle{
    font-weight:bold;
    font-size:large;
    text-align:left;
    text-decoration:underline;
}
.contactdiv{
    background-color:white;
    border:2px solid black;
    width:300px;
    height:200px;
    display:inline-block;
    margin:3px;
}
.contactimgdiv{
    width:300px;
    height:200px;
    display:inline-block;
    margin:3px;
}
.contactimg{
    height:200px;
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>End Slavery in Charlotte</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
    <div id="wrapper">
        <div id="navbar"> 
            <div id="homenav" class="navtab">
                <a href="./index.html" >Home</a>
            </div>      
            <div id="contactnav" class="navtab">
                <a href="./contactus.html" >Contact Us</a>
            </div>
        </div>
        <div id="content">
            <div id="contentwrapper">
                <div id="contactwrapper">
                    <div id="contacttop">
                        <div id="agencies" class="contactdiv">
                            <div id="agenciestitle" class="contacttitle">
                                Agencies
                            </div>
                        </div>
                        <div id="volunteers" class="contactdiv">
                            <div id="volunteerstitle" class="contacttitle">
                                Volunteers
                            </div>
                        </div>
                        <div id="groups" class="contactdiv">
                            <div id="groupstitle" class="contacttitle">
                                Groups
                            </div>
                        </div>
                    </div>
                    <div id="contactbottom">
                        <div id="contactimgleft" class="contactimgdiv">
                            <img src="./images/mainimg.jpg" class="contactimg" />
                        </div>
                        <div id="churches" class="contactdiv">
                            <div id="churchestitle" class="contacttitle">
                                Churches
                            </div>
                        </div>
                        <div id="contactimgright" class="contactimgdiv">
                            <img src="./images/mainimg.jpg" class="contactimg" />
                        </div>
                    </div>
                    <div id="contactbottom">
                        <div id="schools" class="contactdiv">
                            <div id="schoolstitle" class="contacttitle">
                                Schools
                            </div>
                        </div>
                        <div id="churches" class="contactdiv">
                            <div id="churchestitle" class="contacttitle">
                                Churches
                            </div>
                        </div>
                        <div id="societies" class="contactdiv">
                            <div id="societiestitle" class="contacttitle">
                                Societies
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

这是因为中间“教堂”中的文本被设置为垂直对齐它的基线到它旁边的图像的基线。如果你将vertical-align：bottom设置为all .contactdiv，那么你应该很好。

布局推动Div Down

1 个答案: