Div hat margin-right, auch wenn margin & padding-Wert ist 0
Habe ich mit einem div (#Jubiläum-container) mit ein img drin, aber das div hat ein margin auf der rechten Seite. Ich benutzte element untersuchen in Chrome, und es sagte, es gebe keinen Spielraum, aber es zeigt das orange daneben Platz. Ich bin versucht zu machen, die Kontakt info sitzen auf der rechten Seite, aber es lässt mich nicht. Ich habe bereits versucht die Einstellung margin:0 und padding:0.
Das problem ist unter dem Willkommens-header, div, das das Bild, dass sagt feiert 60 Jahre der katholischen service.
Sehen Sie selbst.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Saint Anthony Claret Catholic Church is a humble church in which Catholics from all over the city can come together and worship, confess or make use of our various services" />
<meta name="keywords" content="saint, anthony, church, mass, confession, baptism, confirmation, wedding, matrimony, anaheim, california" />
<meta http-equiv="author" content="Eduardo Pelaez" />
<title>St. Anthony Catholic Church</title>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page">
<div id="header">
<img src="images/logo.png" width="860" height="241" alt="St. Anthony Claret logo" />
<div id="nav">
<ul id="nav-ul">
<a href="index.html"><li>Home</li></a>
<a href="#"><li>Services</li></a>
<a href="#"><li>Groups & Ministries</li></a>
<a href="#"><li>Schedule</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>About</li></a>
</ul>
</div><!-- end #nav-ul -->
</div><!-- end #header -->
<div id="content">
<div id="feature">
<img src="images/feature-img.jpg" width="1250" height="350" alt="Picture of our altar" id="feature-img" />
</div><!-- end #feature -->
<div id="col1">
<div class ="col1-sec sec" id="col1-sec1">
<h2>Welcome</h2>
<div id="anniversary-container">
<img src="images/anniversary-img.jpg" width="862" height="840" alt="Celebrating 60 years of Catholic service" id="anniversary-img" />
</div><!-- end #anniversary-container -->
<div id="contact-container">
<p>1450 E. La Palma Avenue, Anaheim, CA 92805-1551</p>
<p><span class="contact-text">Phone</span> 714-776-0270</p>
<p><span class="contact-text">Fax</span> 714-776-6022</p>
<p><span class="contact-text">Email</span> <a href="mailto:[email protected]">[email protected]</a></p>
</div><!-- end #contact-container -->
</div><!-- end #col1-sec1 -->
<div class="col1-sec sec" id="col1-sec2">
<h2>Clergy</h2>
<p><span class="clergy-header">Pastor</span></p>
<p>Rev. Bill Cao</p>
<p><span class="clergy-header">Parochial Vicars</span></p>
<p>Rev. Douglas Zavala</p>
<p>Rev. Benjamin D. Hoang</p>
<p><span class="clergy-header">Deacons</span></p>
<p>Mr. August Mones</p>
<p>Mr. Salvador Sánchez</p>
</div><!-- end #col1-sec2 -->
<div class="col1-sec sec" id="col1-sec3">
<h2>Office Hours</h2>
<p><span class="hours-text">Weekdays</span> 9:00 AM to 8:00 PM</p>
<p><span class="hours-text">Saturdays</span> 9:00 AM to 5:30 PM</p>
<p><span class="hours-text">Sundays</span> 9:00 AM to 12:30 PM</p>
</div><!-- end #col1-sec3 -->
</div><!-- end #col1 -->
<div id="col2">
<div class="col2-sec sec" id="col2-sec1">
<p><span class="sidebar-header">Mass Schedule</span></p>
<p><span class="mass-header">Sunday</span></p>
<p>06:30 AM - English</p>
<p>08:00 AM - Español</p>
<p>09:30 AM - English</p>
<p>11:00 AM - English</p>
<p>12:30 PM - Español</p>
<p>05:00 PM - Español</p>
<p>06:30 PM - Español</p>
<p><span class="mass-header">Saturday Vigil</span></p>
<p>05:00 PM - English</p>
<p><span class="mass-header">Monday-Friday</span></p>
<p>06:30 AM - English</p>
<p>08:30 AM - English</p>
<p><span class="mass-header">Saturday</span></p>
<p>08:00 AM - English</p>
<p><span class="mass-header">Friday</span></p>
<p>07:00 PM - Español</p>
<p><span class="mass-header">Thursday</span></p>
<p>07:00 PM - Español</p>
<p><span class="mass-header">Perpetual Help Novena Wednesdays</span></p>
<p>07:00 PM - English</p>
</div><!-- end #col2-sec1 -->
<div class="col2-sec sec" id="col2-sec2">
<p><span class="sidebar-header">Confessions</span></p>
<p><span class="confessions-header">Wednesdays</span></p>
<p>05:30 to 06:30 PM</p>
<p><span class="confessions-header">Saturdays</span></p>
<p>03:30 to 04:30 PM<br />or by appointment</p>
</div><!-- end #col2-sec2 -->
<div class="col2-sec sec" id="col2-sec3">
<p><span class="sidebar-header">May Fiesta Contests</span></p>
<p>Pie Baking Contest</p>
<div id="pie-contest">
<a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/pie%20baking%20flyer.pdf"><img src="images/pie-contest.png" width="468" height="487" alt="Announcement for pie baking contest" /></a>
</div><!-- end #pie-contest -->
<p>Salsa Recipe Contest</p>
<div id="salsa-contest">
<a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/salsa%20contest.pdf"><img src="images/salsa-contest.png" width="479" height="527" alt="Announcement for salsa recipe contest" /></a>
</div><!-- end #salsa-contest -->
<div id="karaoke-contest">
<a href="http://stanthonyclaret.org/wp-content/uploads/fiesta/Karaoke%20Flyer.pdf"><img src="images/karaoke-contest.png" width="405" height="475" alt="Announcement for karaoke contest" /></a>
</div><!-- end #karaoke-contest -->
</div><!-- end #col2-sec3 -->
<div class="col2-sec sec" id="col2-sec4">
<p><span class="sidebar-header">Links</span></p>
<ul>
<li><a href="http://www.ccoc.org/">Catholic Charities</a></li>
<li><a href="http://www.rcbo.org/">Diocese of Orange</a></li>
<li><a href="http://w2.vatican.va/content/vatican/en.html">The Holy See</a></li>
</ul>
</div><!-- end #col2-sec4 -->
<div class="col2-sec sec" id="col2-sec5">
<p><span class="sidebar-header">Financial Report</span></p>
<div id="financial-report">
<a href="http://stanthonyclaret.org/announcements-anuncios/"><img src="images/report.png" width="833" height="1069" alt="Cover for the report of our expenses" /></a>
</div><!-- end #financial-report -->
<p>Fiscal Year Ending</p>
<p>06.30.14</p>
</div><!-- end #col2-sec5 -->
</div><!-- end #col2 -->
</div><!-- end #content -->
<div id="footer">
<p>Copyright © 2015 Saint Anthony Claret Catholic Church - All Rights Reserved</p>
</div><!-- end #footer -->
</div><!-- end #page -->
</body>
</html>
CSS
body {
width: 90%;
margin: 0 auto;
text-align: center;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
#col1, #col2 {
float: left;
margin: 1%;}
#col1 {
width: 62.6%;}
#col2 {
width: 31.3%;
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
padding: 0.5em 0;}
#feature, .sec {
margin-bottom: 1em;
background-color: #efefef;} /* remove background color when completed */
/* end general styling */
#feature-img {
height: auto;
width: 100%;}
/* end feature styling */
#anniversary-img {
max-width: 100%;
max-height: 100%;
float: left;}
#anniversary-container {
height: 15em;
width: 15em;
margin: 0;
padding: 0;} /* make container proportionate to img */
#contact-container {
width: 15em;
float: right;} /* make element float inside #anniversary-container */
- entfernen Sie einfach die Breite der
#anniversary-container
Du musst angemeldet sein, um einen Kommentar abzugeben.
Als Sie sagte: "ich bin versucht zu machen, die Kontakt info sitzen rechts, aber"
Wenn Sie möchten, dass Bild in die Rechte und die Kontaktinformationen in der linken. Sie müssen beide in einem übergeordneten div-Element und fügen Sie float Links zu Bild und Recht auf Kontakt zu div und klar sowohl für die nächste div.
Es wird Ihr problem lösen.
Sehen, die gelöst einer mit
JsDFiddle
Ist auch aufgefallen, die Sie geben 800px Höhe auf das Bild wird es in voller Höhe und der div wird seltsam Aussehen.
Eine weitere Sache, die Divs sind block-level-Elemente, was bedeutet, dass Sie immer zu erweitern, um 100% der Breite der container.
Erste, es gibt wirklich keine Marge in der
#anniversary-container
.Zweite, Sie eine
div
tag und eindiv
tag ist ein block-element was bedeutet, dass es immer besetzen die gesamte Zeile Platz.Das problem zu lösen, versuchen Sie
float: left;
zu Ihrem#anniversary-container
Stile.Hier ist die JsFiddle link.
Hoffe, es hilft.
Es ist, weil Ihre div-container ist nicht potentialfrei. Es wird dauern, bis die gesamte Linie, von Ihnen nicht schwimmen es. Oder display:inline-block für beide.
Verwenden Sie float:left für das Jubiläum-div-container statt img-tag
Es ist, weil der
width: 15em;
im#anniversary-container
.`#Jubiläum-container {
height: 15em;
Breite: 15em;
margin: 0;
padding: 0;
}`
Wenn Sie ihn entfernen, dann können Sie sehen
anniversary-container
div
besetzen die gesamte Breite.