html - 100 % 너비를 차지하는 인라인 블록 요소를 작성하는 방법 두 번째 요소에는 호버에 표시되는 다른 요소가 있습니다

1&2) 공백은 .services-box 를 떠 다니면 간단히 제거 할 수 있습니다.  & .service-highlight  왼쪽에 고정 너비를 .service-box 로 설정하십시오.   .service-highlight 에 백분율 너비를 제공하십시오 .

3) 이것을 달성하려면 :hover 를 사용해야합니다 . 그러나 마우스를 가져 가면 숨겨진 상자가 나타나고 마우스가 마우스 위에 있으므로 마우스가 새 상자에 있으므로 :hover 를 잃기 때문에 동일한 줄에 넣을 수 없습니다.  효과가 원래 상태로 돌아가므로 깜박입니다. 이 문제를 피하려면 새 표시 상자를 위에 두십시오.

도움이 되었기를 바랍니다!

.slideList {
  width: 100%;
}
.slideList li {
  position:relative; 
}
.slideList .service-highlight {
  position: absolute;
  color: white;
  bottom: 0;
  left: 0; 
  right:0
}
.slideList .service-highlight p {
  display: inline-block;
  color: white;
  font-size: 18px;
  font-weight: bold;
}
.slideList .service-highlight .services-box{
  text-align: center;
  background-color: #003768;
  width: 200px;
  font-weight: bold;
  float: left;
}
.slideList .service-highlight .services-detail{
  background-color: #0088ff;
  width:calc(100% - 202px);
  float: left;
}

.slideList .hide-description {
  display: none;
 }
 
 
 .services-detail:hover + .hide-description {
  display: block;
  position: absolute;
  bottom: 50px;
 }
 
 .clearFloat {
  clear: both;
 }

<ul class="slideList">
        <li data-transition="fade">
            <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" >
 
            <div class="service-highlight">
                <p class="services-box">SOME SERVICES:</p>
                <p class="services-detail">Service headline detail</p>
                
                <div class="hide-description">
<!-- Div should be a continuation of .services-detail -->
                    <p>A more detailed description of services. This should appear here. In about 3 sentences and at least three lines long</p>
                </div>
                <div class="clearFloat"></div>
            </div>
        </li>
        
<ul>

업데이트 2 :

연결 한 참조에서 텍스트가 아닌 상자 위에 마우스를 놓았습니다. 마크 업 방식을 변경했습니다. 지금 살펴보세요 :

* {
  margin: 0;
  padding: 0;
}
.slideList {
  width: 100%;
  height: 550px;
  background-image: url("https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.slideList ul {
  list-style: none;
}
.service-highlight {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.services-box {
  text-align: center;
  background-color: #003768;
  width: 200px;
  font-weight: bold;
  float: left;
}
.services-detail {
  background-color: #0088ff;
  width: calc(100% - 200px);
  float: left;
}
.hide-description {
  display: none;
}
.slideList:hover .hide-description {
  display: block;
  position: absolute;
  bottom: 0px;
  background-color: #0088ff;
 }
.clearFloat {
  clear: both;
}

<ul class="slideList">
  <li data-transition="fade">
    <div class="service-highlight">
      <p class="services-box">SOME SERVICES:</p>
      <p class="services-detail">Service headline detail</p>
      
      <div class="hide-description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam animi accusamus officia accusantium quaerat distinctio, omnis neque adipisci! Rerum nemo vitae necessitatibus autem fugit ipsam in nam asperiores. Eius, vitae.
    </div>
    <div class="clearFloat"></div>
    </div>
  </li>
        
<ul>