如何解决如何对齐具有不同大小的内容的列div元素?
我正在为博客创建“功能”部分,但在对齐“功能标题#3和功能标题#4”部分时遇到问题。
它们的文字大小不同,但是图像的大小相同。我想知道如何在不更改列大小的情况下正确对齐它们?
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 举报,一经查实,本站将立刻删除。