html - 单词不会留在 div 中

Question

我似乎无法将我的话放入它应该放入的 div 中。文本 Maidir Linne 应该放入红色框中。它基本上是标记为 aboutus 的 div。我希望文本 Maidir Linne 位于标记为 aboutustitle 的 div 中。

HTML:

<div id="centercol">
               <div id="header">
                <img src="Crios Oige Images/Logo.png" id="logo">
                <img src="Crios Oige Images/Title.PNG" id="title">
                <img src="http://www.youtharts.ie/sites/youtharts.ie/files/NYCI%20Logo%20Full%20JPG_2.jpg" id="youthcouncil">
            </div>
            <div id="toolbar">
                <div id="homebutton">
                    <div id="homebuttonlink">
                        <b><a href="index.html" id="homebuttonlinkstyle">Abhaile</a></b>
                    </div>
                </div>
                <div id="videosbutton">
                    <div id="videosbuttonlink">
                        <b><a href="videos.html"; id="videosbuttonlinkstyle">Fiseán</a></b>
                    </div>
                </div>
                <div id="imagesbutton">
                    <div id="imagesbuttonlink">
                        <b><a href="images.html"; id="imagesbuttonlinkstyle">Pictiúir Greannmhar</a></b>
                    </div>
                </div>
                <div id="gamesbutton">
                    <div id="gamesbuttonlink">
                        <b><a href="games.html"; id="gamesbuttonlinkstyle">Cluichí</a></b>
                    </div>
                </div>
                <div id="sportbutton">
                    <div id="sportbuttonlink">
                        <b><a href="sport.html"; id="sportbuttonlinkstyle">Spórt</a></b>
                    </div>
                </div>
                <div id="contactusbutton">
                    <div id="contactusbuttonlink">
                        <b><a href="contactus.html"; id="contactusbuttonlinkstyle">Déan teagmháil linn</a></b>
                    </div>
                </div>
            </div>
            <div id="aboutus">
                <div id="aboutustitle">
                    <p id="aboutustitlestyle">Maidir Linne</p>
                </div>
                <p id="aboutuscontent">***************************************************************************************************************************************************************************************************************************************************************************************************************************</p>
            </div>
            </div>
    </div>

对应的CSS:

html{
background-color: #990033;
}
#centercol {
border:2px solid #a1a1a1;
padding:0px;
background-color: brown; 
margin-top: 0;
margin-right: auto; 
margin-bottom: 0; 
margin-left: auto;
width: 840px;
height:relative;
}   
body {
text-align: justify;
background-image: no-repeat;
}
a {
text-decoration: none;
}
a:link {
color:#FF0000;
}    /* unvisited link */
a:visited {
color:#FF0000;
} /* visited link */
a:hover { 
color:#0000FF;
}   /* mouse over link */
a:active {
color:#FF0000;
}  /* selected link */
#header {
height: 100px;
width: 800px;
background-color: #006600;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
#toolbar {
height: 151px;
width: 734.5px;
background-color: #FF0000;
position: absoloute;
top: -4px;
margin-right: auto;
margin-left: auto;
}
#homebutton {
height: 80px;
width: 199px;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#videosbutton {
height: 80px;
width: 199px;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#imagesbutton {
height: 80px;
width: 199px;
background-color: #0000FF;
position: relative;
top: -19px;
margin: 21px;
float: left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#gamesbutton {
height: 69px;
width: 199px;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#sportbutton {
height: 69px;
width: 199px;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#contactusbutton {
height: 69px;
width: 199px;
background-color: #0000FF;
position: relative;
top: -61px;
margin: 21px;
float: left;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#homebuttonlink {
height: 30px;
width: 150px;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 14px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#videosbuttonlink {
height: 30px;
width: 150px;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 14px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#imagesbuttonlink {
height: 30px;
width: 150px;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 14px;
padding: 10px;
top: 5px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#gamesbuttonlink {
height: 30px;
width: 150px;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 14px;
padding: 10px;
top: -6px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#sportbuttonlink {
height: 30px;
width: 150px;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 14px;
padding: 10px;
top: -6px;
border-radius: 5px;
line-height: -10px;
overflow: hidden;
text-overflow: ellipsis;
}
#contactusbuttonlink {
height: 30px;
width: 150px;
background-color: #FFFF00;
position: relative;
float: left;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 14px;
padding: 10px;
top: -6px;
border-radius: 5px;
overflow: hidden;
text-overflow: ellipsis;
}
#contactusbuttonlinkstyle {
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
line-height: 10px
}
#sportbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#gamesbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#imagesbuttonlinkstyle {
font-size: 17px;
font-family: Verdana, Geneva, sans-serif;
line-height: 10px;
}
#videosbuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#homebuttonlinkstyle {
font-size: 30px;
font-family: Verdana, Geneva, sans-serif;
}
#aboutus {
height: 375px;
width: 400px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
background-color: aqua;
position: relative;
border-radius: 10px;
}
#aboutustitle {
height: 40px;
width: 200px;
background-color: red;
position: relative;
margin-left: 100px;
top: 10px;
border-radius: 20px;
}
#aboutustitlestyle {
font-size: 20px;
color: yellow;
font-family: Verdana, Geneva, sans-serif;
margin-left: 40px;
}
#aboutuscontent {
word-wrap: break-word; 
margin-left: 20px; 
margin-right: 20px;
}

Answer 1

请更新下面的类。它应该可以解决您的问题。

#aboutustitlestyle {
    font-size: 20px;
    color: yellow;
    font-family: Verdana, Geneva, sans-serif;
    margin: 5px 0 0 40px;
    position: absolute;
}