CSS响应式-无法获得所需的对齐方式

Question

我正在尝试通过CSS获得以下响应页脚。我似乎无法弄清楚该怎么做，我对对齐方式和代码有些执着。可以请一些专家咨询一下。我非常感谢。我曾尝试过更改tr td，但我认为我对代码仍然不很了解。我似乎无法实现我想要的。请帮忙。

CODE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
body {
    Margin: 0!important;
    padding: 15px;
    background-color: #FFF;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
}

table {
    border-spacing: 0;
    font-family: sans-serif;
    color: #727f80;
}
.outer-table {
    width: 100%;
    max-width: 670px;
    margin: 0 auto;
    background-color: #FFF;
}

td {
    padding: 0;
}

p {
   Margin:0;
}

a {
    color: #F1F1F1;
    text-decoration: none;
}

/*--- Start Two Column Sections --*/
.two-column {
    text-align: center;
    font-size: 0;
    padding: 5px 0 10px 0;
}


/*--- Start Two Column Image & Text Sections --*/
.two-column img {
    /* width: 100%; */
    max-width: 280px;
    height: auto;
}
.two-column .text {
    padding: 10px 0;
}

/*--- Start Footer Section --*/
.footer {
    width: 100%;
    background-color: #365F91;
    Margin: 0 auto;
    color: #FFF;
}
.footer  img {
    max-width: 135px;
    Margin: 0 auto;
    display: block;
    padding: 4% 0 1% 0;
}
p.footer {
    text-align: center;
    color: #FFF!important;
    line-height: 30px;
    padding-bottom: 4%;
    text-transform: uppercase;
}
/*--- Media Queries --*/
@media screen and (max-width: 400px) {

    .two-column .column, .three-column .column {
        max-width: 100%!important;
    }
    .two-column img {
        /* width: 100%!important; */
    }

}
@media screen and (min-width: 401px) and (max-width: 400px) {

    .two-column .column {
        max-width: 50%!important;
     }

}
@media screen and (max-width:768px) {
    img.logo {
        float:none !important;
        margin-left:0% !important;
        max-width: 200px!important;
    }
}
.two-column img {
    /* width: 100% !important; */
    height: auto !important;
}
img.img-responsive {
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
}


</style>
</head>
<body>
    <div class="wrapper">

             <table class="outer-table">
                <tr>
                    <td class="two-column">
                        <table width="100%">
                            <tr>
                                <td class="footer">
                                    <img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
                                    <p class="text2">Email: [email protected]
                                    <p class="text2">Tel: 04-2294366
                                    <br>

                                    <a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a>
                                </td>
                                <td class="footer">
                                    <p class="text">Email: [email protected]
                                    <p class="text">Tel: 04-2294366
                                    <br>
                                    <a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a>
                                </td>
                            </tr>

                        </table>

                    </td>
                </tr>
            </table>

    </div><!--End Wrapper-->




</body>
</html>

Answer 1

这可以通过利用display：flex来轻松完成。 Here's some helpful documentation.

您可以将div环绕两行，并为该div赋予属性“ display：flex”。

CSS响应式-无法获得所需的对齐方式

问题描述投票：1回答：1

1个回答

最新问题

CSS响应式-无法获得所需的对齐方式

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1