css 使同一行的分组HTML元素垂直于页脚

xhv8bpkk  于 2023-03-09  发布在  其他
关注(0)|答案(1)|浏览(93)

你好,希望你做得很好!我正在创建一个页脚,我通过链接分享我的代码:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
}

body{
    width: 100%;
}
p{
    font-size: 1.6rem;
    line-height: 1.3;
    color: #333;
    font-weight: 400;
}
section{
    padding: 70px 0;
}

.container{
    width: 100%;
    padding: 0 2.5rem;
    margin: 0 auto;
    max-width: 120rem;
}

/* FOOTER */
/* FOOTER */
/* FOOTER */

footer {
    background-color: #f2f2f2;
    font-size: 14px;
    color: #666;
    padding: 50px 0;
  }
  

  .footer{
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .footer-contacts{
    display: flex;
    margin-bottom: 30px;
  }

  .footer-phone,.footer-email{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
  }

  .footer-phone a,.footer-email a{
   text-decoration: none;
   margin-left: 5px;
  }

  .footer-columns {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
  }
 
 
  .footer-column h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  ul li {
    list-style: none;
    margin-bottom: 5px;
  }
<footer>
        <div class="container">
            <div class="footer">
                <div class="footer-contacts">
                    <div class="footer-phone">
                        <img src="https://i.postimg.cc/nL1LD5tD/contact-phone.png" alt="contact-phone" width="30px" height="auto">
                        <a href="tel:+49(0) 123 456 78 000">+49(0) 123 456 78 000</a>
                    </div>
                    <div class="footer-email">
                        <img src="https://i.postimg.cc/nL1LD5tD/contact-phone.png" alt="contact-email" width="30px" height="auto">
                        <a href="mailto:webmaster@example.com">webmaster@example.com</a>
                    </div>
                </div>

            </div>
            <div class="footer-columns">
                <div class="footer-column">
                    <h3>Vivamus</h3>
                    <ul>
                        <li>Product 1</li>
                        <li>Product 2</li>
                        <li>Product 3</li>
                        <li>Product 4</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Elementum</h3>
                    <ul>
                        <li>Product 1</li>
                        <li>Product 2</li>
                        <li>Product 3</li>
                        <li>Product 4</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <ul>
                        <li>Product 1</li>
                        <li>Product 2</li>

                    </ul>
                </div>
            </div>

         

        </div>

    </footer>

x1c 0d1x我希望包含图片电话号码和电话号码的第一个分组HTML元素与第一列在同一行。包含图片电子邮件和文本电子邮件的第二个分组HTML元素与第二列在同一行也是一样的。
我希望第一个分组HTML元素与第一列在同一行也是相同的第二个分组HTML元素和第二列在同一行我试图给予右边距分组HTML元素,但破坏布局。任何想法,可以帮助我。

ars1skjm

ars1skjm1#

试试这样的东西,我只是把footer-phonefooter-email放在同一个footer-column里,这迫使它们排成一排。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
}

body{
    width: 100%;
}
p{
    font-size: 1.6rem;
    line-height: 1.3;
    color: #333;
    font-weight: 400;
}
section{
    padding: 70px 0;
}

.container{
    width: 100%;
    padding: 0 2.5rem;
    margin: 0 auto;
    max-width: 120rem;
}

/* FOOTER */
/* FOOTER */
/* FOOTER */

footer {
    background-color: #f2f2f2;
    font-size: 14px;
    color: #666;
    padding: 50px 0;
  }
  

  .footer{
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .footer-contacts{
    display: flex;
    margin-bottom: 30px;
  }

  .footer-phone,.footer-email{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
  }
  .footer-contact {
       margin-bottom: 1em;
  }

  .footer-phone a,.footer-email a{
   text-decoration: none;
   margin-left: 5px;
  }

  .footer-columns {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
  }
 
 
  .footer-column h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  ul li {
    list-style: none;
    margin-bottom: 5px;
  }
<footer>
        <div class="container">
            <div class="footer-columns">
                <div class="footer-column">
                    <div class="footer-phone footer-contact">
                        <img src="https://i.postimg.cc/nL1LD5tD/contact-phone.png" alt="contact-phone" width="30px" height="auto">
                        <a href="tel:+49(0) 123 456 78 000">+49(0) 123 456 78 000</a>
                    </div>
                    <h3>Vivamus</h3>
                    <ul>
                        <li>Product 1</li>
                        <li>Product 2</li>
                        <li>Product 3</li>
                        <li>Product 4</li>
                    </ul>
                </div>
                <div class="footer-column">
<div class="footer-email footer-contact">
                        <img src="https://i.postimg.cc/nL1LD5tD/contact-phone.png" alt="contact-email" width="30px" height="auto">
                        <a href="mailto:webmaster@example.com">webmaster@example.com</a>
                    </div>
                    <h3>Elementum</h3>
                    <ul>
                        <li>Product 1</li>
                        <li>Product 2</li>
                        <li>Product 3</li>
                        <li>Product 4</li>
                    </ul>
                </div>
                <div class="footer-column">
                    <ul>
                        <li>Product 1</li>
                        <li>Product 2</li>

                    </ul>
                </div>
            </div>

         

        </div>

    </footer>

相关问题