我知道这是非常基本的，但似乎无法理解。我试图将图像浮动到文本的右侧，每次这样做时，图像实际上都会浮动到右侧，但随后，页脚会弹出到顶部，白色背景色消失。令人惊讶的是，我花了两天时间试图解决这个尴尬的错误，但没有结果。这是我的html代码：
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Learninghub </title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slide2.css">
<link rel="stylesheet" href="css/simple-slideshow-styles.css">
</head>
<body>
<div class = "body">
<div class = "header">
<div class = "wrapper">
<div class = "left">
<a href ="http://pac-center.com/#/ms-23/1">
<img src = "images/learninghub.png" width = "406" height = "75" alt" The learninghub and paccenter logo ">
</a>
</div>
<div class = "right">
<img src = "images/call.png" width = "15" height = "15" alt " call icon">
<div class = "today">
<small>Call us today</small></br>
<strong>09-2921465</strong>
</div>
</div>
<div class = "right_2">
<img src = "images/location.png" width = "10" height = "15" alt " location icon">
<div class = " right_1">
<a href = "https://www.google.com.ng/maps">
<small>Suite 1, Capital Hub Mall, Plot 272 Ahmadu Bello Way</small></br>
<strong> Along Wuse-Gwarinpa-Next Express Way, F.C.T Abuja.</strong></small>
</a>
</div>
</div>
</div>
</div>
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="index.php">Home</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">About Us +</label>
<a href="About us.html">About Us</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="methodology.html">Methodology</a></li>
</ul>
</li>
<li><a href="service.html">Services</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">List of Courses +</label>
<a href="#">List of Courses</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="administration.html">Administration</a></li>
<li><a href="agriculture.html">Agriculture</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Ongoing Courses +</label>
<a href="#">Ongoing Courses</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="creative.html">Creative</a></li>
<li><a href="enterprise.html">Enterprise</a></li>
<li><a href="excel.html">Microsoft Excel</a></li>
<li><a href="Hardware.html">Hardware</a></li>
<li><a href="management.html">MIS</a></li>
<li><a href="microsoft_office.html">Microsoft Office</a></li>
<li><a href="networking.html">Networking</a></li>
<li><a href="webdesign.html">Web Design</a></li>
<li><a href="webdev.html">Web Development</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="https://www.facebook.com/TheLearningHubNG/"><img src="images/soc/facebook1.png" height="32" width="32"></a></li>
<li><a href="https://twitter.com/LearningHubNG"><img src="images/soc/twitter1.png" height="32" width="32"></a></li>
<li><a href="https://www.instagram.com/thelearninghub_ng/"><img src="images/soc/instagram1.png" height="32" width="34"></a></li>
</ul>
</nav>
<div class ="about_wrap">
<div class = "aboutus">
<header><h1>ABOUT US</h1></header>
<content>
<p>
The Learning Hub was established with the objective of developing and facilitating learning processes designed
to maximise capacity building and self-development. We have extensive experience and appreciable competence
in rendering quality services to our clients. The business and work environment changes quickly.
The Learning Hub is an operating name and also the training and capacity building outfit of PACCENTER LTD. The
Learning hub has been specifically dedicated as the Training and Consultancy services of PAC CENTER LTD.
PAC CENTER LTD is accredited by the Centre for Management Development (CMD) and is duly registered with the
Computer Professionals Registration Council of Nigeria (CPN).</p>
</content>
</div>
<div class = "aboutus">
<header><h1>OUR MISSION</h1></header>
<content>
<p>
To deliver skills and knowledge that significantly increase our course participants' on-the-job productivity,
thereby enhancing their contributions to the goals of their organisation.
</p>
</content>
</div>
<div class = "aboutus">
<header><h1>OUR VISION</h1></header>
<content>
<p>
To become the preferred partner to organisations and individuals by providing the most comprehensive
professional and personal growth training.
</p>
</content>
</div>
<div class = "aboutus">
<header><h1>OUR CORE VALUES</h1></header>
<content>
<p>
Through these values we create success:
</p>
<ul>
<li><span>L: Listen with empathy to problems</span></li>
<li><span>E: Examine various opinions critically</span></li>
<li><span>A: Acknowledge and discuss the differences and similarities</span></li>
<li><span>R: Recommend the best solution</span></li>
<li><span>N: Nonstop implementation and evaluation</span></li>
</ul>
</content>
</div>
<a href="formpage.html" id = "button">Register Here</a>
</div>
<div class ="right_image">
<img src = "images/gallery/about.png" width = "100%" alt "">
</div>
<div class = "bk">
<footer>
<div class = "footer_left">
<a>
<footer><p> © 2017 thelearningHub </p></footer>
</a>
</div>
<div class = "mobile_footer">
<div class = "footer_right">
<footer><p> We are social </p></footer>
</div>
<div class = "footer_social">
<a href="https://www.facebook.com/TheLearningHubNG/"target="new" title="Facebook">
<img class="socialicon" src="images/soc/facebook1.png" height="15" width="15">
</a>
<a href="https://twitter.com/LearningHubNG" target="new" title="Twitter">
<img class="socialicon" src="images/soc/twitter1.png" height="15" width="15">
</a>
<a href="https://www.instagram.com/thelearninghub_ng/" target="new" title="Instagram">
<img class="socialicon" src="images/soc/instagram1.png" height="15" width="15">
</a>
</div>
</div>
</footer>
</div>
</div>
</body>
这是我的css评论良好：
负责"关于我们"one_answers"正确的图像"的代码被包裹在一条注释下。
/***********About us************/
.about_wrap{
width:40%;
float:left;
}
.aboutus{
padding-top: 20px;
width:95%;
padding-left:30px;
font-size: 15px;
margin-bottom: 20px;
}
.aboutus h1{
margin-bottom: 20px;
text-decoration: underline;
}
ul li {
color: #FFC213;
list-style-type: square;
margin-left: 2em;
}
ul li span {
color: black;
}
/******************Right images*****************/
.right_image{
width:30%;
}
/******************event images*****************/
.imgitem{
width: 100%;
overflow:hidden;
}
.image1, .image2, .image3{
float:left;
width:31%;
height: auto;
margin: 1%;
}
/******************gallery*****************/
.imgitem{
width: 100%;
overflow:hidden;
padding-left: 25px;
}
.img1, .img2, .img3, .img4{
float:left;
width:20%;
height: auto;
margin: 2%;
}
/***************contact**********/
.backg{
float:left;
overflow: hidden;
width:50%;
background: white
}
.container{
margin: 5%;
padding:10%;
background: #FFC213;
}
.container img{
float:left;
margin-right:6px;
}
.topcontent{
padding-bottom: 20px;
}
.middlecontent{
padding-bottom: 20px;
}
/**************form button*******************/
#container {
background: white;
width:50%;
overflow:hidden;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
background:#9B9B9B;
padding:25px;
margin:32px 35px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact textarea {
height:100px;
max-width:100%;
resize:none;
}
#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#FFf;
color:#000000;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#contact button[type="submit"]:hover {
background:#FFC213;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
.error {
color: black;
}
.success {
color: black;
text-align: center;
font-weight: bold;
font-size: 14px;
}
/****************Newsletter********************/
#get_email button[type="submit"] {
cursor:pointer;
width:100px;
border:none;
background:#000;
color:#fff;
margin-top: -24px;
padding:10px;
font-size:15px;
border-radius: 4px;
}
/****************Registration********************/
#reg {
background: white;
width:90%;
overflow:hidden;
}
#Course {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
#reg_contact{
padding:25px;
margin:50px;
}
#reg input[type="text"], #reg_contact input[type="email"], #reg_contact input[type="tel"], #reg_contact input[type="url"], #reg_contact textarea, #reg_contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#reg {
background:#ADADAD;
padding:25px;
margin:32px 35px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#reg input[type="text"], #reg input[type="email"], #reg input[type="tel"], #reg input[type="url"], #reg textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#reg input[type="text"]:hover, #reg input[type="email"]:hover, #reg input[type="tel"]:hover, #reg input[type="url"]:hover, #reg textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#reg textarea {
height:100px;
max-width:100%;
resize:none;
}
#reg button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:black;
color:white;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#reg button[type="submit"]:hover {
background:#FFC116;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#reg button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#reg input:focus, #reg textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
/*****************Button*******************/
#button {
background-color: #FFC213;
border: none;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
margin-left: 40px;
}
/*****************Googlemap*******************/
.mymap{
margin-left: 34px;
margin-right: 35px;
background-color: #FFC213;
}
/********* footer ***********/
.footer_left{
margin-top: 20px;
margin-bottom: 20px;
float:left;
margin-left: 30px;
color: white;
}
.footer_right{
float: left;
color: white;
margin-right: 8px;
}
.footer_social{
padding-right: 30px;
}
.footer_social a{
display: inline-block;
margin-right: 5px;
}
.mobile_footer{
float:right;
margin-top: 18px;
width :18%;
}
.bk{
background:black;
height: auto;
margin: 0 auto;
overflow:hidden;
}
感谢大家的努力。我终于解决了这个问题。我所做的是转到我的页脚，应用100%的宽度并向左浮动，这是为了迫使它到达页面的底部。这是我编辑过的代码：
.bk{
width: 100%;................apply width 100%...............
background:black;
float:left;.....................float left..............
margin: 0 auto;
overflow:hidden;
}
将第一个div向左浮动，并应用%中的宽度
/******************Left images*****************/
.left_image{
margin-top: 30px;
float:left;
width:50%;
}
将第二个div向右浮动，并给它一个宽度。
.about_wrap{
float:right;
width: 50%;
}