如何在网格框中围绕在框中定义了填充的内容周围制作固定的全宽水平线

Question

我正在HTML5和Scss中创建一个网格框列，并面临有关在内容中间对齐的水平线的问题。我的网格框在内容周围都有填充，并且有两条全宽的行。我尝试使用位置进行管理，但是当内容增加时，线条会从其原始位置移动。即使内容增加，我也需要修复它。

Kindly check the codepen content for better understanding - https://codepen.io/Akkanksha1/pen/ZEbVRJd

这是所需的最终输出。该部分以红色突出显示。

Answer 1

您应该尝试在li中添加100%的宽度，删除后并添加第一个子项。

SCSS：

$color-orange: #FAA02E;
$color-gray: #757575;
$lighter-gray: #f9f9f9;
$light-gray: #fbfafa;
$dark-gray: #626262;
$color-white: #FFFFFF;
$base-font: 'Montserrat', sans-serif;
@mixin transition ($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
@mixin transform($transforms) {
-webkit-transform: $transforms;
-moz-transform: $transforms;
-ms-transform: $transforms;
-o-transform: $transforms;
transform: $transforms;
}
@mixin buttons($background){
border: none;
outline: none;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
background-color: $background;
color: $color-white;
border-radius: 29px;
line-height: 17px;
padding: 8px 50px;
cursor: pointer;
@include transition(all .6s ease);
}

.course-grid-wrapper{
display: flex;
flex-flow: row wrap;
margin: 0 -15px 30px -15px;
.courses-col{
width: 25%;
padding: 0 15px;
margin-bottom: 30px;
.courses-box{
position: relative;
background-color: #fff;
height: 100%;
border-radius: 5px 5px 0 0;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
.image{
display: block;
width: 100%;
height: auto;
img{
display: block;
max-width: 110px;
height: 110px;
border-radius: 50%;
margin: 0 auto;
}
}
.courses-content{
padding: 15px;
h4{
color: #000;
}
h6{
margin: 15px 0 30px 0;
color: #9D9D9D;
span {
margin-right: 5px;
}
}
.course-date-time{
margin: 15px 0 15px 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
li {
list-style-type: none;
font-size: 14px;
color: $color-gray;
width: 100%;
span {
margin-right: 5px;
}

&:first-child{
border-right: 1px solid #efefef;
}
}
&:before, &:after{
content: '';
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
background-color: #ccc;
}
&:before{
top: 229px;
}
&:after{
bottom: 83px;
}
}
.enroll-btn{
@include buttons($color-orange);
&:hover{
}
}
}
}
}
}
https://codepen.io/HexawebIT/pen/XWmoBQz

Answer 2

我已经设法找到了答案 - .HTML

<div class="course-grid-wrapper">
<div class="courses-col">
<div class="courses-box">
<div class="image">
<img src="images/brandon.jpg" alt="image">
</div>
<div class="courses-content">
<div class="course-detail">
<h4>Production planning process(overview)</h4>
<h6><span><i class="fa fa-users" aria-hidden="true"></i></span>Deepak ladha</h6>
</div>
<ul class="course-date-time">
<li><span><i class="fa fa-calendar-o" aria-hidden="true"></i></span>May</li>
<li><span><i class="fa fa-clock-o" aria-hidden="true"></i></span> 10 Hours</li>
</ul>
<button class="btn enroll-btn">Enroll</button>
</div>
</div>
</div>
</div>

嘻——

.course-grid-wrapper{
display: flex;
flex-flow: row wrap;
margin: rem(0 -15px 30px -15px);
.courses-col{
width: 25%;
padding: rem(0 15px);
margin-bottom: rem(30px);
.courses-box{
position: relative;
background-color: #fff;
height: 100%;
border-radius: 5px 5px 0 0;
text-align: center;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
.image{
display: block;
width: 100%;
height: auto;
padding: rem(10px 10px);
img{
display: block;
max-width: 110px;
height: 110px;
border-radius: 50%;
margin: 0 auto;
}
}
.courses-content{
.course-detail{
padding: rem(15px);
h4{
color: #000;
}
h6{
margin: rem(15px 0 15px 0);
color: #9D9D9D;
span {
margin-right: 5px;
}
}
}
.course-date-time{
/*margin: rem(15px 0 15px 0);*/
padding: 0;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid #F6F6F6;
border-bottom: 1px solid #F6F6F6;
li {
list-style-type: none;
font-size: rem(14px);
color: $color-gray;
border-right: 1px solid #F6F6F6;
padding: rem(15px);
span {
margin-right: rem(5px);
}
&:last-child {
border-right: none;
&:after {
display: none;
}
}
}
}
.enroll-btn{
@include buttons($color-orange);
margin: .9375rem;
border: 2px solid $color-orange;
&:hover{
border: 2px solid $color-orange;
background-color: $color-white;
color: $color-orange;
box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.07);
}
}
}
}
}
}

首先 - 我从主类.courses-box中删除了填充padding: 10px 10px;，并将填充添加到列中的每个div。 例如，我将所有元素放在 Div 中并将填充添加到div。

.image{
padding: 10px 10px;
}

已从.courses-content中删除填充。我将 h4 和 h6 标题放在一个div 中。

.course-detail{
padding: 15px;
}

我想要全宽水平线的地方。现在变得更容易了。我删除了位置，并在 ul 类中添加了顶部和底部的边框。

.course-date-time{
padding: 0;
border-top: 1px solid #F6F6F6;
border-bottom: 1px solid #F6F6F6;
}

对于 li - 添加了第一个元素右边框，并为每个 li 添加了填充。

li{
border-right: 1px solid #F6F6F6;
padding: 15px;
}

像这样，我实现了围绕ul的全宽水平线。