Html 如何扩展超过其他div的div？

正如您在演示中看到的，若您将鼠标悬停在div上，它将向下展开，然后您可以看到更多文本，但两行之间将有一个空格

如何扩展第二行的div，使其超过其他div

提前谢谢

您可以在此处找到演示：

和HTML/CSS代码：

<section>

  <div class="services-grid row">
    <div class="service service1 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-briefcase"></i>
      <h3>My Jobs</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      <a href="#" class="cta">Weiterlesen <i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service2 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-book-reader"></i>
      <h3>Further Education</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p>
      <a href="#" class="cta">Read More<i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service3 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-money-check-alt"></i>
      <h3>Salary</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      <a href="#" class="cta">Read More <i class="fas fa-chevron-right"></i></a>
    </div>
    <div class="service service1 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-briefcase"></i>
      <h3>New Opportunities</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="#" class="cta">Read More <i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service2">
      <i class="fas fa-book-reader"></i>
      <h3>Weiterbildung</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. </p>
      <a href="#" class="cta">Read More <i class="fas fa-chevron-right"></i></a>
    </div>

    <div class="service service3 col-xs-12 col-sm-12 col-md-4 col-lg-4 first">
      <i class="fas fa-money-check-alt"></i>
      <h3>Salary Adjustment</h3>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
      <a href="#" class="cta">Read More<i class="fas fa-chevron-right"></i></a>
    </div>
  </div>
</section>

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial, Geneva, sans-serif;
  margin: 0;
  background: #fff;
  color: #999;
}

a {
  text-decoration: none;
  margin: 1rem 0;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 1px;
}

p {
  font-size: 1rem;
  margin: 0.5rem 0 0 0;
  line-height: 1.5;
}

section {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #002776;
  font-size: 1.4rem;
  margin: 0.4rem 0;
}

.section-lead {
  margin: 1rem auto 1.5rem;
}

.service a {
  color: #5b7abb;
  display: block;
}

.service h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #56ceba;
  font-size: 1.3rem;
  margin: 0.5rem 0 0.2rem;
}

.services-grid {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: flex-start;
  align-items: flex-start;
  position: relative;
}

.service {
  margin: 15px;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  -webkit-box-flex: 1;
  flex: 1 1 30%;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #e7e7e7;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.service:hover {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.service i {
  font-size: 3.6rem;
  margin: 1rem 0;
}

.service1 i,
.service1 h4,
.service1 .cta {
  color: #002776;
}

.service1:hover {
  border: 2px solid #002776;
}

.service2 i,
.service2 h3,
.service2 .cta {
  color: #002776;
}

.service2:hover {
  border: 2px solid #002776;
}

.service3 i,
.service3 h3,
.service3 .cta {
  color: #002776;
}

.service3:hover {
  border: 2px solid #002776;
}

.service .cta span {
  font-size: 0.6rem;
}

.service > * {
  flex: 1 1 100%;
}

.service .cta {
  align-self: flex-end;
  margin: 5px 0 0 0;
}

@media all and (max-width: 900px) {
  .services-grid {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }
}

.cta i {
  font-size: 14px;
  padding-left: 5px;
}
.cta {
  margin-top: 0px;
}
.service p {
  max-height: 50px;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
}

.service:hover p {
  max-height: 150px;
  transition: max-height 0.3s ease-in;
  flex-basis: 100%;
}
.service:hover .service {
  background: #fbf9f9;
}

我的工作
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”

继续教育
我们需要一个好的环境，一个好的环境，一个好的环境

薪水
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”

新机会
但是，在最低限度上，我们需要一个实验室来进行日常工作

扩充教育
Lorem ipsum Door sit amet，Conseteteur sadipscing Eliter，sed diam nonumy

薪金调整
Lorem ipsum Door sit amet，Conseteteur sadipscing Eliter，sed diam nonumy

*,
*：之前，
*：之后{
-webkit框大小：继承；
-moz盒大小：继承；
框大小：继承；
}
html{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
字体系列：Helvetica、Arial、Geneva、无衬线字体；
保证金：0；
背景：#fff；
颜色：#999；
}
a{
文字装饰：无；
保证金：1rem 0；
字号：600；
文本转换：大写；
字体大小：0.8125rem；
字母间距：1px；
}
p{
字号：1rem；
保证金：0.5雷姆0；
线高：1.5；
}
部分{
最大宽度：1000px；
保证金：0自动；
文本对齐：居中；
填充：30px；
}
h3{
字体系列：“蒙特塞拉特”，无衬线；
字号：600；
颜色：#002776；
字体大小：1.4rem；
保证金：0.4雷姆0；
}
.科长{
保证金：1雷姆自动1.5雷姆；
}
.服务a{
颜色：5b7abb；
显示：块；
}
.服务h4{
字体系列：“蒙特塞拉特”，无衬线；
字号：600；
颜色：#56ceba；
字体大小：1.3rem；
保证金：0.5雷姆0.2雷姆；
}
.服务网格{
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：灵活启动；
调整项目：灵活启动；
位置：相对位置；
}
.服务{
利润率：15px；
填充：15px；
边界半径：4px；
文本对齐：居中；
-webkit-box-flex:1；
弹性：130%；
显示：-网络工具包盒；
显示器：flex；
柔性包装：包装；
边框：2px实心#e7e7e7；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
.服务：悬停{
-webkit盒阴影：0 5px 10px rgba（0,0,0,0.08）；
-moz盒阴影：0 5px 10px rgba（0,0,0,0.08）；
盒影：0 5px 10px rgba（0,0,0,0.08）；
}
.服务一{
字体大小：3.6rem；
保证金：1rem 0；
}
.1.i，
.服务1 h4，
.1.cta{
颜色：#002776；
}
.service1：悬停{
边框：2个实心#002776；
}
.2.i，
.服务2 h3，
.2.cta{
颜色：#002776；
}
.服务2：悬停{
边框：2个实心#002776；
}
.3我，
.服务3 h3，
.3.cta{
颜色：#002776；
}
.服务3：悬停{
边框：2个实心#002776；
}
.service.cta span{
字体大小：0.6rem；
}
.服务>*{
弹性：1100%；
}
.service.cta{
自对准：柔性端；
保证金：5px0；
}
@全部和全部介质（最大宽度：900px）{
.服务网格{
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
}
}
.cta i{
字体大小：14px；
左侧填充：5px；
}
.cta{
边际上限：0px；
}
.p.服务{
最大高度：50px；
过渡段：最大高度0.2s放松；
溢出：隐藏；
}
.服务：悬停p{
最大高度：150像素；
过渡：最大高度0.3英寸；
弹性基准：100%；
}
.服务：悬停.服务{
背景#fbf9f9；
}

我把它简化为基本内容，但这就是你想要的吗

div{
宽度：400px；
}
保险商实验室{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
弯曲方向：行；
列表样式：无；
位置：相对位置；
}  
李{
宽度：100px；
高度：80px；
边缘底部：10px；
位置：相对位置；
}
李>司{
宽度：100%；
身高：100%；
边框：1px实心#d9d9d9
}
li：悬停>div{
高度：100px；
位置：绝对位置；
z指数：1；
背景色：#ebebebeb；
}

项目


项目


项目


项目


项目


项目

是的，但当我在代码中添加position:relative for section和services grid时，position:absolute for service div:hover与您的演示不一样抱歉，这是我现在可以做的最好的操作，而无需筛选您的代码。不幸的是，当涉及到编辑时，Bootstrap从不帮任何忙。