Question

我试着制作一个有3个小马的页脚，但我无法制作它。所以这是我尝试的结果

但不是这样，我得到了这个结果

这是我的html和CSS代码：

.footer {
background:none #333;
height:100%;
margin:0 10px;
padding:0;
}

.footer div:first-child {
float:left;
margin:0 0 0 20px;
overflow:hidden;
}
.footer div:first-child ul {
list-style:none;
margin:0;
overflow:hidden;
padding:10px 0 0;
}
 .footer div:first-child ul li {
color:#026593;
float:left;
font-size:11px;
}
.footer div:first-child ul li:first-child a {
padding-left:0;
}
.footer div:first-child ul li a {
color:#026593;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:30px;
padding:0 13px;
text-decoration:none;
text-transform:uppercase;
}
.footer div:first-child ul li a:hover, .footer div:first-child ul li.selected a {
color:#ff7500;
   }
 .footer div:first-child p {
color:#026593;
display:block;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:11px;
margin:-2px 0 0;
text-decoration:none;
text-transform:uppercase;
}
.footer div.connect {
float:right;
padding:20px 20px 0;
}
.footer div.connect span {
color:#ff7500;
float:left;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:12px;
text-transform:uppercase;
}
 .footer div.connect a {
float:left;
height:22px;
margin:0 0 0 7px;
text-indent:-99999px;
width:23px;
 }
.footer aside h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
 }
.footer div h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
float: left;
}
.footer aside ul li{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid #666;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
.footer aside ul li a:hover{
color: #1b9bff;
}
.footer p{
color: #1b9bff;
padding-left: 28%;
 }
.footer div p{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
 .footer div img{
padding: 20px 0 0 20px;
}
.footer div ul li a:hover{
color: #1b9bff;
 }

我的HTML代码

         <div id="main-footer">
       <div class="footer">
                    <aside>

                        <h4>Sitemap</h4>
                        <ul>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                        </ul>
                      </aside>
                        <div>
                            <h4>Menu</h4>
                        <img src="./images/gpwa.gif" />
                        <img src="./images/18.png" />
                        <img src="./images/21.png" />
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        </div>
                        <div>
                            <h4>Terms</h4>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                        </div>

      </div>
    </div>

谢谢

Answer 1

此代码有助于解决问题

<style>
        .footer {
            display: flex;
        }
        aside , div {
            flex: 1;
        }
        .terms p{
            display: inline-block;
        }

    </style>

</head>

<body>
    <div id="main-footer">
       <div class="footer">
                    <aside>

                        <h4>Sitemap</h4>
                        <ul>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                        </ul>
                      </aside>
                        <div>
                            <h4>Menu</h4>
                        <img src="./images/gpwa.gif" />
                        <img src="./images/18.png" />
                        <img src="./images/21.png" />
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        </div>
                        <div class="terms">
                            <h4>Terms</h4>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                        </div>

      </div>
    </div>

如果有问题，请知道

Answer 2

＆＃13;

.footer {
    background: none #333;
    height: 100%;
    margin: 0 10px;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.footer div:first-child {
float:left;
margin:0 0 0 20px;
overflow:hidden;
}
.footer div:first-child ul {
list-style:none;
margin:0;
overflow:hidden;
padding:10px 0 0;
}
 .footer div:first-child ul li {
color:#026593;
float:left;
font-size:11px;
}
.footer div:first-child ul li:first-child a {
padding-left:0;
}
.footer div:first-child ul li a {
color:#026593;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:30px;
padding:0 13px;
text-decoration:none;
text-transform:uppercase;
}
.footer div:first-child ul li a:hover, .footer div:first-child ul li.selected a {
color:#ff7500;
   }
 .footer div:first-child p {
color:#026593;
display:block;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:11px;
margin:-2px 0 0;
text-decoration:none;
text-transform:uppercase;
}
.footer div.connect {
float:right;
padding:20px 20px 0;
}
.footer div.connect span {
color:#ff7500;
float:left;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:12px;
text-transform:uppercase;
}

.flex-column {
  display: flex;
flex-direction: column;
}
 .footer div.connect a {
float:left;
height:22px;
margin:0 0 0 7px;
text-indent:-99999px;
width:23px;
 }
.footer aside h4{
color: #1b9bff;
padding-left: 6.3789%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
 }
.footer div h4{
color: #1b9bff;
padding-left: 6.3789%;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
width: 18.23%;
float: left;
}
.footer aside ul li{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid #666;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
.footer aside ul li a:hover{
color: #1b9bff;
}
.footer p{
color: #1b9bff;
padding-left: 28%;
 }
.footer div p{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
width: 20%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
 .footer div img{
padding: 20px 0 0 20px;
}
.footer div ul li a:hover{
color: #1b9bff;
 }

＆＃13;

  <div id="main-footer">
       <div class="footer">
                    <aside>

                        <h4>Sitemap</h4>
                        <ul class="flex-column">
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                        </ul>
                      </aside>
                        <div class="flex-column">
                            <h4>Menu</h4>
                        <img src="./images/gpwa.gif" />
                        <img src="./images/18.png" />
                        <img src="./images/21.png" />
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        </div>
                        <div class="flex-column">
                            <h4>Terms</h4>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                        </div>

      </div>
    </div>

＆＃13;

我在div和整个页脚中插入了一些flexbox个元素。如上所述，此代码需要一些清理。我只是给骨架，所以你可以在之后改变它。

Answer 3

这肯定会帮助你

CSS

  .col { 
      background: #0a5173;
      float: left;
      padding: 30px 0 0 35px;
      width: 310px;
    }

    .col:first-child {
      padding: 30px 0 0 0;
    }

    h2 { 
      background: url(extra-title-bg.jpg); 
      color: #FFF;
      float: left; 
      font: bold 18px Arial, Helvetica, sans-serif; 
      font-variant: small-caps; 
      margin: 0 0 20px 0; 
      padding: 9px 0 0 19px; 
      height: 33px; 
      width: 291px;
    }

    ul { 
      list-style: none; 
      margin: 0; 
      padding: 0; 
    }

    li { 
      background: url(extra-links-bg.jpg); 
      border-bottom: 1px dotted #25c3ba; 
      border-top: 1px dotted #25c3ba; 
      float: left; 
      height: 35px; 
      margin: 3px 0;
      padding: 0; 
      width: 310px; 
    }

    li a { 
      color: #FFF;
      display: block;
      float: left; 
      font: normal 12px Verdana, Geneva, sans-serif; 
      padding: 10px 0 0 19px; 
      text-decoration: none;
    }

    li:hover { 
      background: #5fa4c5;
    }

HTML

<div class="col">
  <h2>recent entries</h2>
  <ul>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
  </ul>
</div>
<div class="col">
  <h2>recent comments</h2>
  <ul>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
   <li><a href="#">3 Column Footer Example</a></li>
  </ul>
</div>
<div class="col">
  <h2>featured on</h2>
  <ul>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
  </ul>
</div>

Answer 4

哦，男人，这是一些令人难以置信的丑陋代码。你应该真的清理它。无论如何，将您的页脚显示为flex并为您的3个容器div添加一些类。我添加了col-3，我将它的宽度设置为33.33％。

＆＃13;

.footer {
 display: flex;
 background: #212121;
 color: white;
 padding: 20px;
 box-sizing : border-box;
}

.col-3 {
  width: 33.33%;
}
.menu__items ul{
  list-style:none;
  padding: 0;
}

＆＃13;

<div id="main-footer">
       <div class="footer">
                    <div class="col-3">
                        <h4>Sitemap</h4>
                        <div class="menu__items">
                        <ul>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                            <li><a href="#">Menu</a></li>
                        </ul>
                        </div>
                      </div>
                        <div class="col-3">
                            <h4>Menu</h4>
                        <img src="./images/gpwa.gif" />
                        <img src="./images/18.png" />
                        <img src="./images/21.png" />
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        <p>I put some text here</p>
                        </div>
                        <div class="col-3">
                            <h4>Terms</h4>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                            <p>I put some text here</p>
                        </div>
      </div>
    </div>

＆＃13;

Answer 5

将此样式添加到您的css文件中。根据你的css重新排列它会起作用。

.footer {
  float left;
}
aside, div, div {
 float: left; width: 33%;
}
.footer aside h4 { width: 90%;}
aside ul {margin:0; padding:0;}
.footer aside ul li {width: 100%;}
.footer div h4 {width: 90%;}
.footer div p {width: 100%}
.footer p {padding: 10%}

Answer 6

从以下位置删除不必要的花车：

.footer div:first-child ul li
.footer div.connect a
.footer div h4
.footer aside ul li
.footer div p

将float：left属性添加到div和旁边：

div, aside {
  float: left;
}

作为建议，清理你的CSS。许多这些属性似乎没什么必要......

Answer 7

试试这个：

.col-footer{width:30%; float:left;display:block; margin:1.5%;}

.col-footer li{width:100%}

.col-footer p{width:100%}

.footer {
background:none #333;
height:100%;
margin:0 10px;
padding:0;
}

.footer div:first-child {
float:left;
margin:0 0 0 20px;
overflow:hidden;
}
.footer div:first-child ul {
list-style:none;
margin:0;
overflow:hidden;
padding:10px 0 0;
}
 .footer div:first-child ul li {
color:#026593;
float:left;
font-size:11px;
}

.footer div:first-child ul li a {
color:#026593;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:30px;
padding:0 13px;
text-decoration:none;
text-transform:uppercase;
}
.footer div:first-child ul li a:hover, .footer div:first-child ul li.selected a {
color:#ff7500;
   }
 .footer div:first-child p {
color:#026593;
display:block;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:11px;
margin:-2px 0 0;
text-decoration:none;
text-transform:uppercase;
}
.footer div.connect {
float:right;
padding:20px 20px 0;
}
.footer div.connect span {
color:#ff7500;
float:left;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
line-height:12px;
text-transform:uppercase;
}
 .footer div.connect a {
float:left;
height:22px;
margin:0 0 0 7px;
text-indent:-99999px;
width:23px;
 }
.footer aside h4{
color: #1b9bff;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
 }
.footer div h4{
color: #1b9bff;
padding-top: 2%;
margin-bottom: -1%;
border-bottom: 1px solid #666;
}
.footer aside ul li{
color :#1b9bff;
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid #666;
width: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
.footer aside ul li a:hover{
color: #1b9bff;
}
.footer p{
color: #1b9bff;
 }
.footer div p{
color :#1b9bff;
padding-top: 5px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: small;
float: left;
 }
 .footer div img{
padding: 20px 20px 0 0px;
float:left;
display:block;
}
.footer div ul li a:hover{
color: #1b9bff;
 }

  <div id="main-footer">
    <div class="footer">  
                          
        <div class="col-footer">
            <h4>Sitemap</h4>
            <ul>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Menu</a></li>
            </ul>
        </div>
                      
        <div class="col-footer">
            <h4>Menu</h4>
            <img src="./images/gpwa.gif" />
            <img src="./images/18.png" />
            <img src="./images/21.png" />
            <p>I put some text here</p>
            <p>I put some text here</p>
            <p>I put some text here</p>
            <p>I put some text here</p>
            <p>I put some text here</p>
            <p>I put some text here</p>
            <p>I put some text here</p>
        </div>                        
                        
        <div class="col-footer">
            <h4>Terms</h4>
            <p>I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here, I put some text here.</p>
        </div>
    </div>
</div>

试图在我的页脚上放置3列，但没有结果

7 个答案: