即使保证金和保证金，Div也有保证金权利。填充值为0
我有一个包含div（#calendar-container），里面有一个img，但div右边有一个边距。我在Chrome中使用了inspect元素，它说没有边距，但它显示了它旁边的橙色空间。我正在尝试将联系信息设置在右侧，但它不允许我。我已经尝试设置margin：0和padding：0。
问题出在欢迎标题之下，这张照片上写着庆祝60年天主教服务的画面。 亲眼看看。
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:stanthonyclaret@yahoo.com">stanthonyclaret@yahoo.com</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 */
5 个答案:
答案 0 :(得分：1)
首先， #anniversary-container中确实存在无边距。
其次，您使用的是div代码，而div代码是阻止元素，这意味着它总是占据整个行空间。
要解决此问题，尝试将float: left;添加到#anniversary-container个样式中。
以下是JsFiddle link 。
希望它有所帮助。
答案 1 :(得分：1)
这是因为你的容器div没有浮动。这将占用你的全部线路。或者对两者使用display：inline-block。
答案 2 :(得分：1)
正如你所说＆＃34;我试图让联系信息位于右边，但是＆＃34;
如果您想要右侧的图像和左侧的联系信息。你需要在父div中取两个并向左添加浮动到图像和右边联系div并清除两个到下一个div。
它将解决您的问题。
使用
查看已解决的问题#anniversary-container
还注意到你给图像提供了800px的高度，它将占据整个高度，而div看起来很奇怪。
Divs是块级元素，这意味着它们总是扩展到容器宽度的100％。
答案 3 :(得分：1)
使用float：left代替周年纪念容器div而不是img tag
答案 4 :(得分：0)
这是因为width: 15em;中的#anniversary-container。
`＃周年纪念容器{
身高：15em;
宽度：15em;
保证金：0;
填充：0;
}`
如果您将其删除，则可以看到anniversary-container div占据整个宽度。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？