好的，上周我一直在尝试自己做这件事。我发誓我已经访问了所有可用的 Google 页面。
我最初的问题是我的三列图层被堆叠了。
在此站点上遇到类似问题后，我能够使用 float 技术将页脚分成三列。
但是，它是 Angular :
就像，第一列是我希望所有这些都在的地方。
我将发布我的 CSS 和 HTML。
我在这方面很新，你们所有人都可能会因为我的代码有多糟糕而呕吐。但是，这就是我来找你的原因。我需要帮助，因为我一个人做不到。
您可以在此处查看我正在处理的网站。 http://www.bbcardmore.com/
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}
<?php?>
<html>
<body>
<head>
</style>
<head>
<div id="footer">
<div class="left">
<h3><p style="padding-top: 10pt; " class="paragraph_style"><font size="5" color="red">About Us</font><br /></p></h3>
<p class="paragraph_style_1"><a title="Our History" href="http://www.bbcardmore.com/bbc-history-3/">Our History</a> <br /></p>
<p class="paragraph_style_1"><a title="Our Pastor" href="http://www.bbcardmore.com/our-pastor/">Our Pastor</a><br /> </p>
<p class="paragraph_style_1"><a title="Statement Of Faith" href="http://www.bbcardmore.com/statement-of- faith/">Statement Of Faith</a><br /></p>
<p class="paragraph_style_1"><a title="Calendar" href="http://www.bbcardmore.com/calendar/">Calendar</a><br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_1"><a title="Map" href="http://www.bbcardmore.com/map/">Map</a></p>
<div class="centered">
<h3><p style="padding-top: 10pt; " class="paragraph_style"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"><font size="5" color="red">Service Times</font><br /></p></h3>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Sunday School~ 10:00</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Sunday Morning Service~ 11:00 AM</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Sunday Evening Service~ 7:00 PM</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Wednesday Evening Bible Study~ 7:00 PM</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Transportation and child care available for all services.</a><br /></p>
<div class="right">
<h3><p style="padding-top: 10pt; " class="paragraph_style"><a title="Contact Us" href="http://www.bbcardmore.com/contact-us/"><font size="5" color="red">Contact Us:</font><br /></p></h3>
<p class="paragraph_style_2"><a title="Map" href="http://www.bbcardmore.com/map/"><font size="3" color="red">Mailing Address:</font><br /></p>
<p class="paragraph_style_1"><a title="Map" href="http://www.bbcardmore.com/map/">1515 Easley Drive<br /></p>
<p class="paragraph_style_1"><a title="Map" href="http://www.bbcardmore.com/map/">Ardmore, OK 73401<br /></p>
<p class="paragraph_style_3"><span class="style"><a title="" href="mailto:bbcardmore@aol.com"><font size="3" color="red">Email:</font></span> bbcardmore@aol.com<br /></p>
<p class="paragraph_style_3"><span class="style"><a title="Contact Us" href="http://www.bbcardmore.com/contact-us/"><font size="3" color="red">Phone:</font></span> (580) 223-6629<br /></p>
<div>
</body>
</html>
最佳答案
我认为您看起来像这个演示:- http://tinkerbin.com/N87sxG5i
实际上你没有关闭你的子 div，比如:left, Center, Right 所以我关闭了这些子 div，然后我给了 float:left;你的 center div 而不是 text-align:center;到那个 div 并且它现在可以根据您的要求正常工作....
HTML
<html>
<body>
<head>
</style>
<head>
<div id="footer">
<div class="left">
<h3><p style="padding-top: 10pt; " class="paragraph_style"><font size="5" color="red">About Us</font><br /></p></h3>
<p class="paragraph_style_1"><a title="Our History" href="http://www.bbcardmore.com/bbc-history-3/">Our History</a> <br /></p>
<p class="paragraph_style_1"><a title="Our Pastor" href="http://www.bbcardmore.com/our-pastor/">Our Pastor</a><br /> </p>
<p class="paragraph_style_1"><a title="Statement Of Faith" href="http://www.bbcardmore.com/statement-of- faith/">Statement Of Faith</a><br /></p>
<p class="paragraph_style_1"><a title="Calendar" href="http://www.bbcardmore.com/calendar/">Calendar</a><br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_1"><a title="Map" href="http://www.bbcardmore.com/map/">Map</a></p>
</div>
<div class="centered">
<h3><p style="padding-top: 10pt; " class="paragraph_style"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"><font size="5" color="red">Service Times</font><br /></p></h3>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Sunday School~ 10:00</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Sunday Morning Service~ 11:00 AM</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Sunday Evening Service~ 7:00 PM</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Wednesday Evening Bible Study~ 7:00 PM</a><br /></p>
<p class="paragraph_style_1"><a title="Service Times" href="http://www.bbcardmore.com/service-times/"> Transportation and child care available for all services.</a><br /></p>
</div>
<div class="right">
<h3><p style="padding-top: 10pt; " class="paragraph_style"><a title="Contact Us" href="http://www.bbcardmore.com/contact-us/"><font size="5" color="red">Contact Us:</font><br /></p></h3>
<p class="paragraph_style_2"><a title="Map" href="http://www.bbcardmore.com/map/"><font size="3" color="red">Mailing Address:</font><br /></p>
<p class="paragraph_style_1"><a title="Map" href="http://www.bbcardmore.com/map/">1515 Easley Drive<br /></p>
<p class="paragraph_style_1"><a title="Map" href="http://www.bbcardmore.com/map/">Ardmore, OK 73401<br /></p>
<p class="paragraph_style_3"><span class="style"><a title="" href="mailto:bbcardmore@aol.com"><font size="3" color="red">Email:</font></span> bbcardmore@aol.com<br /></p>
<p class="paragraph_style_3"><span class="style"><a title="Contact Us" href="http://www.bbcardmore.com/contact-us/"><font size="3" color="red">Phone:</font></span> (580) 223-6629<br /></p>
</div>
<div>
</body>
</html>
CSS
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
float:left;
margin-left:25px;
}
关于html - 三列层对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11322474/