Question

我是一名技术撰稿人，他被分配了创建网站的工作。我需要帮助我为网站创建的页脚。我无法制作一个适用于我设法创建的HTML代码的良好css标记。再次编码不是我的力量，而是我正在学习和实施的东西。任何帮助，将不胜感激。这是我目前正在使用的HTML代码和CSS。

    <!DOCTYPE html>
<html>
    <body>

        <header>

        <footer class="footer-distributed">

               <nav class="footer1">

        <div class="footer-left">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

        <div class="footer-left1">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>
        <div class="footer-left2">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link2 text</a><li>
                      <li><a href="url">link2 text</a><li>
                      <li><a href="url">link2 text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

</div>
        <div class="footer-left3">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

        <div class="footer-left4">

                     <h1>Suite</h1>
                     <ul>
                     <ul style="list-style-type:none">
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link3 text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>
                      <li><a href="url">link text</a><li>

    </div>

</nav>

</footer>

    </body>

</html>

CSS如下。坦率地在教程中找到了这段代码并使用它并修改了值，但我没有得到理想的结果。希望页脚能够响应5列。谢谢大家看看，感谢任何帮助。！[在此输入图像说明] [1]

            .footer-distributed{
background-color: #551155;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 20px 40px;
margin-top: 0px;
    height:320px
    }

    .footer-left,
    .footer-left1,
    .footer-left2,
    .footer-left3,
    .footer-left4 {
     width: 18%;
      }

    .footer-left,
    .footer-left1,
    .footer-left2,{
              margin-right: 20px;
              margin-right: 2rem;
                }

            .footer-left,
            .footer-left1,
            .footer-left2,
            .footer-left3,{
             float: left;
            }

            .footer-left4 {
            float: right;
            }

             .footer-distributed h1{
              color:  #ffffff;
             font: normal 36px 'Cookie', cursive;
             margin: 0;
             }

Answer 1

您可以使用名为display:flex的CSS属性执行此操作，这样可以更轻松地执行此操作。

看看这个JSFiddle

.footer_wrap {width:100%; max-width:100%; background:#ccc;}
.footer_content {padding:10px; display:flex;}
.footer_nav {width:150px;}

<div class="footer_wrap">

  <div class="footer_content">
    <nav class="footer_nav">
      <ul>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
    <nav class="footer_nav">
      <ul>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
        <li>Item 3</li>
      </ul>
    </nav>
  </div>

</div>

Answer 2

我会看看下面的http://jsfiddle.net/Gar3H/2/，它通过一些很好的最佳实践演示了您正在寻找的布局类型。

这显示了4列布局，但原理保持不变 - 它利用媒体查询来确保您的网站在不同的屏幕尺寸/设备上进行扩展。

请注意class footerFloat的使用会重复多次。根据您的要求，您无需<div class="footer-left1">，<div class="footer-left2">等

页脚中的响应页脚和列

2 个答案: