Question

我正在尝试创建一种类似于here

的页脚

现在我遇到的问题是让内容放置在彼此身边而不是堆叠在彼此之上。

我尝试使用display：flex，但是它可以移动所有内容，包括我想保留在原处的文本，而这并不是我想要的结果，因此我不确定下一步该怎么做。 / p>

.footer {
    background-color: #EB5931;
    color: white;
    padding-left: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
}


.pleft {
    width: 20%;
    color: rgba(255, 255, 255, 0.74);
}

  <div class="footer">

                    <h3 class="footerleft">THE DESIGN PROCESS</h3>
                    <p class="pleft">The design process includes many different parts, each used in their own way. 
                    </p>

                    <ul class="footernav">

                        <li>
                            HOME
                        </li>
                        <li>
                            ABOUT
                        </li>
                        <li>
                            DESIGNS
                        </li>
                        <li>
                            HELP
                        </li>

                    </ul>

                    <h3 class="contactus">CONTACT US</h3>
                    <ul class="contactinfo">
                        <li>
                            info@designer.com
                        </li>
                        <li>
                                123-456-7890
                        </li>
                        <li>
                                101-101-1010
                        </li>
                    </ul>


                    <hr>


                </div>

如果有人可以帮助我解决这个问题，将不胜感激。

Answer 1

使用过的display:flex

.footer {
  background-color: #EB5931;
  color: white;
  padding-left: 30px;
  padding-bottom: 10px;
  padding-top: 10px;
  display: flex;
}

.pleft {
  /* width: 20%; */
  color: rgba(255, 255, 255, 0.74);
}

.footer div {

width: 33.333%}

<div class="footer">

  <div>
    <h3 class="footerleft">THE DESIGN PROCESS</h3>
    <p class="pleft">The design process includes many different parts, each used in their own way.
    </p>
  </div>


  <div>
    <ul class="footernav">

      <li>
        HOME
      </li>
      <li>
        ABOUT
      </li>
      <li>
        DESIGNS
      </li>
      <li>
        HELP
      </li>

    </ul>
  </div>

  <div>
    <h3 class="contactus">CONTACT US</h3>
    <ul class="contactinfo">
      <li>
        info@designer.com
      </li>
      <li>
        123-456-7890
      </li>
      <li>
        101-101-1010
      </li>
    </ul>
  </div>




  <hr>


</div>

如何将内容放置在彼此相邻的页脚中？

1 个答案: