Question

好的，我上周一直试图自己做这件事。我发誓我已经访问了每个Google页面。

我原来的问题是我的三柱层堆叠了在这个网站上遇到一个类似的问题后，我能够通过浮动技术将我的页脚分成三列。

然而，它是一个角度：
比如，第一列是我想要的所有内容。
我将发布我的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>

Answer 1

我认为你看起来像这个演示： - 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;
}

Answer 2

我不确定但它可能有用...... 试试这个代码..

.left{
float:left;
}
.right{
float:left;
}
.centered{
float:left;
}

Answer 3

您需要正确格式化标记，关闭所有打开的标记以避免嵌套错误。

浮动是一项棘手的业务，浮动元素需要放置在要围绕它们流动的元素之前。

您的标记应格式如下：

<div class="center">
    <div class="left">
        <p class="red-title">About Us</p>
        <p><a title="Our History" href="http://www.bbcardmore.com/bbc-history-3/">Our History</a></p>
        <p><a title="Our Pastor" href="http://www.bbcardmore.com/our-pastor/">Our Pastor</a></p>
        <p><a title="Statement Of Faith" href="http://www.bbcardmore.com/statement-of- faith/">Statement Of Faith</a></p>
        <p><a title="Calendar" href="http://www.bbcardmore.com/calendar/">Calendar</a></p>
        <p><a title="Map"  href="http://www.bbcardmore.com/map/">Map</a></p>
    </div>
    <div class="right">
        <p class="red-title"><a title="Contact Us" href="http://www.bbcardmore.com/contact-us/">Contact Us:</a></p>
        <p><a title="Map" href="http://www.bbcardmore.com/map/"><span class="red">Mailing Address:</span></a></p>
        <p><a title="Map" href="http://www.bbcardmore.com/map/">1515 Easley Drive</a></p>
        <p><a title="Map" href="http://www.bbcardmore.com/map/">Ardmore, OK 73401</a></p>
        <p><a title="Email" href="mailto:bbcardmore@aol.com"><span class="red">Email:</span> bbcardmore@aol.com</a></p>
        <p><a title="Contact Us" href="http://www.bbcardmore.com/contact-us/"><span class="red">Phone:</span> (580) 223-6629</a></p>
    </div>
    <p class="red-title"><a title="Service Times" href="http://www.bbcardmore.com/service-times/">Service Times</a></p>
    <p><a title="Service Times" href="http://www.bbcardmore.com/service-times/">Sunday School~ 10:00</a></p>
    <p><a title="Service Times" href="http://www.bbcardmore.com/service-times/">Sunday Morning Service~ 11:00 AM</a></p>
    <p><a title="Service Times" href="http://www.bbcardmore.com/service-times/">Sunday Evening Service~ 7:00 PM</a></p>
    <p><a title="Service Times" href="http://www.bbcardmore.com/service-times/">Wednesday Evening Bible Study~ 7:00 PM</a></p>
    <p><a title="Service Times" href="http://www.bbcardmore.com/service-times/">Transportation and child care available for all services.</a></p>
</div>

这个CSS表将把这个标记转换为你想要的三个列设计：

.left {
    float: left;
    text-align: left;
}
.right {
    float: right;
    text-align: right;
}
.center {
    text-align: center;
}
.red-title {
    color: #e00;
    font-size: 180%;
    font-family: sans-serif;
}
.red {
    color: #e00;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
p {
    margin: 8px;
}

Answer 4

我认为这就是你要找的东西

     <div style="background-color: Black; width: 100%; height: 680px;">
            <div style="width: 970px; margin: 0 auto;padding:0px">
                <div style="width: 25%; height: 675px; float: left; background-color: Blue;">
                 Left div
                </div>
                <div style="width: 75%; height: 675px; float: right; background-color: white">
                    <div style="width: 75%; height: 675px; float: left; background-color: red">
                    Center Div
                    </div>
                    <div style="width: 25%; height: 675px; float: right; background-color: Green">
                     Right Div
                    </div>
                </div>
            </div>
        </div>

三列层对齐

4 个答案: