如何对齐具有不同大小的内容的列div元素？

编程问答 2022-08-15

问题描述

我正在为博客创建“功能”部分，但在对齐“功能标题＃3和功能标题＃4”部分时遇到问题。

它们的文字大小不同，但是图像的大小相同。我想知道如何在不更改列大小的情况下正确对齐它们？

features_section

CSS / HTML： 

    /*ELEMENT WITH NO MARGIN AND PADDING AND 100% WIDTH*/
    .elemNone {margin:0 0;padding:0 0;width:80%;}

    /*ELEMENT WITH NO MARGIN AND PADDING ONLY*/
    .elemNone2 {margin:0 0;padding:0 0;}

    /*STRIKETHROUGHT WHITE LINE TEXT*/
    .strikeText {display: flex;align-items: center;text-align: center;font-weight:bold;font-size:35px;padding:0 0;margin:0 0;letter-spacing:3px;}
    .strikeText::before,.strikeText::after {content: '';flex: 1;border-bottom: 3px solid black;}
    .strikeText::before {margin-right: .25em;}
    .strikeText::after {margin-left: .25em;}

    /*OTHER FEATURES STYLE*/
    /*.otherFeat {border:1px solid white;}*/
    .otherFeat h5 {text-transform:uppercase;text-align: center;}
    .otherFeat p {font-size:13px;font-weight:100px;text-align: justify;}
    <html>
    <head>
        <title>Sample Page</title>

        <!-- CSS only -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

        <!-- JS,Popper.js,and jQuery -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>

    </head>

    <body>

    <!-- OTHER FEATURES -->
<center>
        <div class="row elemNone">

            <div class="col-sm-12 otherFeat elemNone">
                 <div class="strikeText">Other Features</div> <!-- strikethrough -->
                <div class="col-sm-6" style="width:48%;display:inline-block;border-right:1px solid black;"><img src="https://via.placeholder.com/600" class="img-responsive"style="width:50%;margin-left:20%;margin-right:20%;" />
                    <h5>FEATURE TITLE #1</h5>
                    <p>Turpis nam enim odio porta vestibulum malesuada fermentum nulla ligula proin hac! Semper maecenas suspendisse,libero eros quisque sollicitudin eleifend ipsum tempor rutrum accumsan. Varius malesuada fames mauris. Scelerisque nisi magnis aliquet.</p>
                </div><!-- end of col-sm-6 -->
                <div class="col-sm-6" style="width:48%;display:inline-block;">
                    <img src="https://via.placeholder.com/600" class="img-responsive"style="width:50%;margin-left:20%;margin-right:20%;" />
                    <h5>FEATURE TITLE #2</h5>
                    <p>Suscipit dictum vehicula volutpat pulvinar cursus per nascetur pulvinar augue fermentum. Odio diam fames nunc euismod lobortis sed. Donec imperdiet lectus ac litora habitant felis pellentesque curae;? Maecenas diam ligula viverra. Aptent.</p>
                </div><!-- end of col-sm-6 -->
            </div> <!-- end of col-sm-12 -->
            <div class="col-sm-12 otherFeat elemNone" style="border-top:1px solid black;">
                <div class="col-sm-6" style="width:48%;display:inline-block;border-right:1px solid black;"><img src="https://via.placeholder.com/600" class="img-responsive"style="width:50%;margin-left:20%;margin-right:20%;" />
                    <h5>FEATURE TITLE #3</h5>
                    <p>Quis ac ultricies mollis,sociis blandit natoque sociosqu malesuada porta varius tristique vulputate! Facilisis molestie felis ac. Sollicitudin adipiscing massa cras. Mauris odio torquent,magna maecenas rutrum? Accumsan curae; mollis nec accumsan convallis sagittis aptent platea,auctor lacus. </p>
                </div><!-- end of col-sm-6 -->
                <div class="col-sm-6" style="width:48%;display:inline-block;">
                    <img src="https://via.placeholder.com/600" class="img-responsive"style="width:50%;margin-left:20%;margin-right:20%;" />
                    <h5>FEATURE TITLE #4</h5>
                    <p>Cubilia vitae facilisis quam ornare nam montes magna netus curabitur netus ullamcorper. At curabitur et vulputate condimentum consectetur tempus eget pretium vehicula primis. Sit ultrices facilisi aliquet ipsum integer.</p>
                </div><!-- end of col-sm-6 -->
            </div> <!-- end of col-sm-12 -->
        </div> <!-- end of row -->
</center>
    </body>
    </html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

alignmentbootstrap-4colhtml