Css 布局下推Div_Css_Html - Fatal编程技术网

Css 布局下推Div

css html

Css 布局下推Div,css,html,Css,Html,我有一个问题，我的布局是推动一个div低于预期。这是一个固定的三排布局，但第二排似乎被向下推。小提琴和下面的代码 CSS HTML 结束夏洛特的奴隶制机构志愿者组教堂学校教堂社会这是因为位于最中间的“教堂”中的文本被设置为将其基线与旁边图像的基线垂直对齐。如果您将垂直对齐：bottom设置为all.contactdiv和all.contactimgdiv，您应该会很好。提示：您使用的ID超过了需要的数量，并且您患有一种称为“divitites”的疾病。不要用那么多div。你可

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

CSS

HTML


结束夏洛特的奴隶制
机构
志愿者
组
教堂
学校
教堂
社会

这是因为位于最中间的“教堂”中的文本被设置为将其基线与旁边图像的基线垂直对齐。如果您将垂直对齐：bottom设置为all.contactdiv和all.contactimgdiv，您应该会很好。

提示：您使用的ID超过了需要的数量，并且您患有一种称为“divitites”的疾病。不要用那么多div。你可以很容易地将标题放在标题中，菜单放在列表中，如果你使用HTML5，你甚至可以使用

nav

，

figure

和

section

放在一旁。密码就是诗。使其易于访问。
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;
}

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