Html 尝试在页脚上放置3列，但没有结果_Html_Css

Html 尝试在页脚上放置3列，但没有结果

html css

Html 尝试在页脚上放置3列，但没有结果,html,css,Html,Css,我试着用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:

我试着用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>
























菜单
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
条款
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字

谢谢

此代码将帮助解决此问题

<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>


.页脚{
显示器：flex；
}
一旁，div{
弹性：1；
}
.条款p{
显示：内联块；
}






















菜单
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
条款
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字
我在这里放了一些文字

如果有一些问题，那么让我知道，哦，伙计，这是一些非常丑陋的代码。你真的应该把它清理干净。无论如何，将页脚显示为flex，并将一些类添加到3个容器div中。我添加了col-3，我将它的宽度设置为33.33%

.footer{
显示器：flex；
背景:#212121 ;；
颜色：白色；
填充：20px；
框大小：边框框；
}
上校3{
宽度：33.33%；
}
.菜单项{
列表样式：无；
填充：0；
}


网站地图










.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%}


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

div, aside {
  float: left;
}

  .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;
    }

<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>