个人中心
gpt4 book ai didi

html - 三列层对齐

转载 作者：行者123 更新时间：2023-11-28 13:32:06 26 4
gpt4 key购买 nike

好的，上周我一直在尝试自己做这件事。我发誓我已经访问了所有可用的 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/

26 4 0
文章推荐： javascript - 按值对对象进行排序并获取键作为 JavaScript 中的输出
文章推荐： html - 无法将我的导航栏居中
文章推荐： swift - 在 iOS 应用程序中查找文件
文章推荐： CSS 粘性页脚
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com