我知道这是非常基本的，但似乎无法绕过它。我试图将图像浮动到文本的右侧，每次我这样做，图像实际浮动到右边但是，页脚弹出到顶部，白色背景颜色消失。我花了两天时间试图解决这个令人尴尬的错误但没有结果。这是我的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评论：
负责关于我们和正确图像的代码包含在评论中。
/***********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;
}
答案 0 :(得分：0)
感谢大家的努力。我终于解决了。我做的是去我的页脚并应用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%;
}