Question

亲爱的朋友们，

我有一个特殊的问题，我似乎无法找到解决方案。

我试图将最大div的宽度应用于较小的div，以便它们在宽度上看起来相等，通过flexboxing。不幸的是，到目前为止所有的解决方案都是徒劳的。你知道为什么我所链接的示例中的不同div不会显示与最大元素相同的宽度吗？我知道盒子从内容中得到了它们的宽度，但我似乎无法让它们按照我想要的方式运行。

HTML

            <section id="contact" class="wrapper bgfixed">
            <div>
            <h1>Contact</h1>
            <div  id="contactholder">


        <a href="#">
        <div>
            <h1 class="icon-mail"></h1>
            <h2>EMAIL</h2>
            <p>someonesprofessionalemail@gmail.com</p>
          </div>
        </a>  

        <a href="#">
        <div>
            <h1 class="icon-old-phone"></h1>
            <h2>TELEPHONE</h2>
            <p>39 88 49 92 91</p>
          </div>
        </a>  

        <a href="#">
        <div>
            <h1 class="icon-facebook2"></h1>
            <h2>FACEBOOK</h2>
            <p>www.facebooooooooooooooooooook.com/snowman</p>
          </div>
        </a>  
         <a href="#">
        <div>
            <h1 class="icon-soundcloud"></h1>
            <h2>LOREM IPSUM</h2>
            <p>www.loremipsumyesyesyesblahblabhlabh.com</p>
          </div>
        </a>  


            </div>
        </div>
</section>

CSS

    a{text-decoration: none;}
    #contact
    {
        width: 100%;
        height: 82vh;
        color: whitesmoke;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #34495e;
    }
    #contactholder
    {
        display: flex;
        justify-content: space-between;
        font-size: 80%;
    }
    #contactholder div
    {
        flex: 1;
        flex-grow: 1;
        font-size: 0.5rem;
    }

    #contactholder div h1
    {
        padding: 3rem;
        letter-spacing: 0;
        display: inline-block;
        background-image: linear-gradient(white, 1%, #3498db);
        border-radius: 100rem;
        box-shadow: 0 1px 1px grey;
        transition: 0.3s;
        margin-bottom: -0.5rem;
    }

    #contactholder a:hover h1
    {
        background-image: linear-gradient(white, 1%, #00A4EB);
        text-shadow: 0 1px 1px;


    }

希望有一些聪明的头脑！

祝福， Lodott1

Flexbox等宽问题

0 个答案: