html - 图片 float 问题

Question

您好，我有三张图片，它们都具有相同的 css，除了一张 float 得更多。我认为这可能与周围其他元素的填充有关......如果有人对如何解决这个问题有任何想法，那将非常有帮助!谢谢!我将包括一个 html 和 css 片段，但我无法让它显示在 jsfiddle 上，所以我不知道该片段会有多大帮助。抱歉，我会添加一些图片。再次感谢。

第一张图片是我下面两张图片正在做的，这是我想要的，第二张图片是错误的。

/***RESET CSS***/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*-----------------------------------------Content in the Body------------------------------------------*/	
	
body{
	font-family: 'Cormorant Garamond', serif;
	margin: 0 0 100px; /* bottom = footer height */
	
	}
	
h1 {
	text-align: center;
 	color:#59C4C5;
 	font-size: 35px;
 	margin: 20px;
	font-weight:bold;
	}

section{
	text-align: center;
	width: 100%;
	}

h2{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color:white;
	font-size: 24px;
	margin: 5px;
	padding:20px;
	letter-spacing:2px;
	}


p{
	text-align: left;
	line-height:150%;
	font-size:110%;
	margin-top:10%;
	}


/*---------------------------------------------------Lists-------------------------------------------------------*/	
li{
	text-align: left;
	line-height:150%;
	font-size:110%;
}

li ol li{
	text-indent:20px;
}

/*-----------------------------------------------------3 Columns with Icons--------------------------------------*/	 
.column-left{
	float:none;
	width: 100%;
	/*padding: 1%;*/
	margin-left: 3%;
	}
	
#left-box{
	background-color:#28C3F3;
	color: white;
	padding: 15px;
	border-radius:30px;	
	}
	
.column-center{
	float: left;	
	width: 100%;
	padding: 1%;
	}

#middle-box{
	background-color:#EF5067;
	color: white;
	padding: 15px;
	border-radius:30px;	
	}
	
.column-right{
	float: left;
	width: 100%;
	padding: 1%;
	}
	
#right-box{
	background-color:#FEC43F;
	color: white;
	padding: 15px;
	border-radius:30px;
	}


/*-----------------------------------------Zig Zag Layout Boxes with Images------------------------------------------*/		


.blue-box{
	float: left;
	width: 98%;
	padding: 1%;
	}
	
#blue-textbox{
	background-color:#28C3F3;
	color: white;
	padding: 15px;
	border-radius:30px;
	}

.pink-box{
	float: left;
	width: 98%;
	padding: 1%;
	}
	
#pink-textbox{
	background-color:#EF5067;
	color: white;
	padding: 15px;
	border-radius:30px;
	}

.yellow-box{
/*	float: left;*/
	alignment-adjust:central;
	width: 98%;
	padding: 1%;
	}
	
#yellow-textbox{
	background-color:#FEC43F;
	color: white;
	padding: 15px;
	border-radius:30px;
	padding-bottom: 5%;
	}
	
.image {
	width: 30% !important;
	display: inline;
	padding: 1px;
	padding-top: 50px;
	border-radius:30px;
	}
	
/*-----------------------------------------Student Testimonial Quote------------------------------------------*/		
.column-left{
	float: left;
	width: 30%;
	padding: 1%;
	padding-bottom: 5%;
	text-align:center;
	}
	
.left-box{
	background-color:#59C4C5;
	color: white;
	padding: 10px;
	border-radius:30px;	
	text-align:center;
	}
	
.column-center{
	display:inline-block;
	width: 30%;
	padding: 1%;
	padding-bottom: 5%;
	text-align: center;
	}

.middle-box{
	background-color:#59C4C5;
	color: white;
	padding: 15px;
	border-radius:30px;	
	}
	
.column-right{
	float: right;
	width: 30%;
	padding: 1%;
	padding-bottom: 5%;
	text-align: center;
	}
	
.right-box{
	background-color:#59C4C5;
	color: white;
	padding: 15px;
	border-radius:30px;
	}	

<!-------------------------------------3 Columns with icons------------------------------------------->

<section id="gcom">
	<h1> ~ Design is so simple, that's why it is so complicated ~ </h1>
   
<div class="column-left">
	<div id= "left-box">
		<h2> Content</h2>
		<a href="#overview"> <img border="0" alt="msum site" src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001" width="150" height="150"></a>
		<p> GCOM 366 is designed to teach intermediate web design. Building on the beginning skills you’ve mastered in GCOM266, you will learn the current development tools commonly used in front end web development. Subjects will include web hosting, text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX, and Forms. You will learn through lectures, demonstrations, reading assignments, and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
</p>
<br>
<a href="#overview"> <img border="0" alt="msum site" src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001" width="30%" height="30%"></a>
</div>
</div>

 
<div class="column-center">
	<div id= "middle-box">
		<h2> Objectives</h2>
        <a href="#course"> <img border="0" alt="msum site" src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001" width="150" height="150"></a>
        <p> Upon successful completion of the course the student will:</p>
<ul>
	<li>1) Demonstrate competency in the following computer software applications or practices.
    <ol>
    http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001rkup Language (HTML5)</li>
		<li> b. Cascading Style Sheets (CSS3)</li>   
		<li> c. Photoshop</li><li> d. IFirefox, Chrome, Safari, IE </li>
		</ol>
        </li>
	<li>2. Design web pages of various complexities. 
	<li>3. Understand terminology used in web publishing.</li>
	<li>4. Discuss the importance of graphic applications and their relationship to the graphic communications industry.</li>
	</ol>
       </li>
</ul>        
        
<br>
<a href="#course"> <img border="0" alt="msum site" src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001" width="30%" height="30%"></a>
</div>
</div>

<div class="column-right">
	<div id= "right-box">
		<h2> Description</h2>
		<a href="#assignments"> <img border="0" alt="msum site" src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001" width="150" height="150"></a>
		<p >The course centers around weekly projects that will feed into the development of a final project. A website must a have a clear purpose and estabhttp://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001ts will develop their plan for this, and execute it with skills learned in the class. The website must be well organized, competitively designed, and skillfully coded. GCOM 366 focuses on current tools used in front end web design and development. Subjects include site planning and concept development, foundational HTML5 and CSS, forms, and FTP clients. Advanced topics will include JavaScript libraries, SEO, analytics and social media.
</p>
<br>
<a href="#assignments"> <img border="0" alt="msum site" src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001" width="30%" height="30%"></a>
</div>
</div>
     
</section>

</div>


<!-------------------------------------Zig Zag Layout Boxes with Images------------------------------------------->

<section class="clearfix">
<div class="image"><img src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001
	<div id="blue-textbox">
		<h2> Graphic Communication</h2>
		<p> Graphic Communications majors focus on the creation and production of visual images. Coursework explores areas of print production and design as well as web and multimedia development. Intensive hands-on instruction with access to the latest industry equipment and software prepares graduates with professional industry knowledge and experience to excel in a variety of related career fields. To receive the B.A. Degree in Graphic Communications, the student must meet the minimum university requirements and specific requirements for the program. Completion of 120 credits is required for this degree which includes the Liberal Arts and Sciences Core (42 credits). </p>
  
<br>
</div>
</div>
</section>

<section class="clearfix">
<div class="image"><img src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001"></div>
<div class="pink-box" id="course">
	<div id="pink-textbox">
		<h2> Course</h2>
		<p> This intermediate course builds on the student's basic knowledge of computer graphics pertaining to the production of print related 2D graphics, illustrations, typesetting, and preparation of press-ready art. The Macintosh platform and the software applications used in the graphic communications industry will be explored in more depth. Courses train students in the technologies and principles necessary to design graphics, layout images, manipulate and enhance images, prepare projects for offset lithographic press, use digital prepress techniques, create multimedia projects, design websites, front end coding and scripting, as well as produce technical graphics, motion graphics, 3D modeling and animation. Projects are prepared from concept to production.</p>
<br>
</div>
</div>
</section>

<section class="clearfix">
<div class="image"><img src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001"></div>
<div class="yellow-box" id="assignments">
	<div id="yellow-textbox">
		<h2> Assignments</h2>
		<p> Work on coding throughout the semester, you as a student will be able to take away an understanding of page structure, navigation bar links, and responsive design to a hamburger style navigation menu. You will learn the foundation and plan flowcharts, and do your own site maps and walk through the production process. Styling, forms, and interactivity within the page design itself.  Along with learning through assigments and in class work, students have the opportunity to join Web Design Club right here at Minnesota State University Moorhead.</p>
<br>
</div>
</div>
</section>
<br>

Answer 1

您的标记不完整。

这个

<div class="image"><img src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001
<div id="blue-textbox">

应阅读:

<div class="image"><img src="http://brightcove04.o.brightcove.com/3388362517001/3388362517001_4741618882001_Rob-Gron-Cat-Ski-Celebrates-an-Interception.jpg?pubId=3388362517001"></div>
<div class="blue-box" id="graphic-communication">
<div id="blue-textbox">