0
こんにちは私は、1つを除いて、すべてが同じCSSを持っている3つの画像があります。私はおそらくそれの周りの他の要素にパディングする必要があるかもしれないと思う...もし誰かが本当に助けるだろうこの問題を解決する方法に関するアイデアを持っている！ありがとう！私は、HTMLとCSSのスニペットを含めるが、私はそれがjsfiddleに表示することができなかったので、スニペットがどのくらいの助けになるかわからない。申し訳ありませんが、私はいくつかの写真を追加します。 もう一度ありがとうございます。Imageフローティングの問題
最初の画像は私の下の2枚の写真がしているもので、私が望むもので2番目の画像はエラーです。
/***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 {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
/*-----------------------------------------Content in the Body------------------------------------------*/ \t
\t
body{
\t font-family: 'Cormorant Garamond', serif;
\t margin: 0 0 100px; /* bottom = footer height */
\t
\t }
\t
h1 {
\t text-align: center;
\t color:#59C4C5;
\t font-size: 35px;
\t margin: 20px;
\t font-weight:bold;
\t }
section{
\t text-align: center;
\t width: 100%;
\t }
h2{
\t text-align: center;
\t font-family: Arial, Helvetica, sans-serif;
\t color:white;
\t font-size: 24px;
\t margin: 5px;
\t padding:20px;
\t letter-spacing:2px;
\t }
p{
\t text-align: left;
\t line-height:150%;
\t font-size:110%;
\t margin-top:10%;
\t }
/*---------------------------------------------------Lists-------------------------------------------------------*/ \t
li{
\t text-align: left;
\t line-height:150%;
\t font-size:110%;
}
li ol li{
\t text-indent:20px;
}
/*-----------------------------------------------------3 Columns with Icons--------------------------------------*/ \t
.column-left{
\t float:none;
\t width: 100%;
\t /*padding: 1%;*/
\t margin-left: 3%;
\t }
\t
#left-box{
\t background-color:#28C3F3;
\t color: white;
\t padding: 15px;
\t border-radius:30px; \t
\t }
\t
.column-center{
\t float: left; \t
\t width: 100%;
\t padding: 1%;
\t }
#middle-box{
\t background-color:#EF5067;
\t color: white;
\t padding: 15px;
\t border-radius:30px; \t
\t }
\t
.column-right{
\t float: left;
\t width: 100%;
\t padding: 1%;
\t }
\t
#right-box{
\t background-color:#FEC43F;
\t color: white;
\t padding: 15px;
\t border-radius:30px;
\t }
/*-----------------------------------------Zig Zag Layout Boxes with Images------------------------------------------*/ \t \t
.blue-box{
\t float: left;
\t width: 98%;
\t padding: 1%;
\t }
\t
#blue-textbox{
\t background-color:#28C3F3;
\t color: white;
\t padding: 15px;
\t border-radius:30px;
\t }
.pink-box{
\t float: left;
\t width: 98%;
\t padding: 1%;
\t }
\t
#pink-textbox{
\t background-color:#EF5067;
\t color: white;
\t padding: 15px;
\t border-radius:30px;
\t }
.yellow-box{
/* \t float: left;*/
\t alignment-adjust:central;
\t width: 98%;
\t padding: 1%;
\t }
\t
#yellow-textbox{
\t background-color:#FEC43F;
\t color: white;
\t padding: 15px;
\t border-radius:30px;
\t padding-bottom: 5%;
\t }
\t
.image {
\t width: 30% !important;
\t display: inline;
\t padding: 1px;
\t padding-top: 50px;
\t border-radius:30px;
\t }
\t
/*-----------------------------------------Student Testimonial Quote------------------------------------------*/ \t \t
.column-left{
\t float: left;
\t width: 30%;
\t padding: 1%;
\t padding-bottom: 5%;
\t text-align:center;
\t }
\t
.left-box{
\t background-color:#59C4C5;
\t color: white;
\t padding: 10px;
\t border-radius:30px; \t
\t text-align:center;
\t }
\t
.column-center{
\t display:inline-block;
\t width: 30%;
\t padding: 1%;
\t padding-bottom: 5%;
\t text-align: center;
\t }
.middle-box{
\t background-color:#59C4C5;
\t color: white;
\t padding: 15px;
\t border-radius:30px; \t
\t }
\t
.column-right{
\t float: right;
\t width: 30%;
\t padding: 1%;
\t padding-bottom: 5%;
\t text-align: center;
\t }
\t
.right-box{
\t background-color:#59C4C5;
\t color: white;
\t padding: 15px;
\t border-radius:30px;
\t } \t<!-------------------------------------3 Columns with icons------------------------------------------->
<section id="gcom">
\t <h1> ~ Design is so simple, that's why it is so complicated ~ </h1>
<div class="column-left">
\t <div id= "left-box">
\t \t <h2> Content</h2>
\t \t <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>
\t \t <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">
\t <div id= "middle-box">
\t \t <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>
\t <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>
\t \t <li> b. Cascading Style Sheets (CSS3)</li>
\t \t <li> c. Photoshop</li><li> d. IFirefox, Chrome, Safari, IE </li>
\t \t </ol>
</li>
\t <li>2. Design web pages of various complexities.
\t <li>3. Understand terminology used in web publishing.</li>
\t <li>4. Discuss the importance of graphic applications and their relationship to the graphic communications industry.</li>
\t </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">
\t <div id= "right-box">
\t \t <h2> Description</h2>
\t \t <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>
\t \t <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
\t <div id="blue-textbox">
\t \t <h2> Graphic Communication</h2>
\t \t <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">
\t <div id="pink-textbox">
\t \t <h2> Course</h2>
\t \t <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">
\t <div id="yellow-textbox">
\t \t <h2> Assignments</h2>
\t \t <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>
は浮動要素によって引き起こされる問題のように見えます。 clearfix/clearを使用してください：両方とも動作をリセットするには – KCarnaille
あなたの提供するコードは表示されるイメージと一致しません – mhatch
あなたの問題が何であるかを説明できますか？ – Geeky