如何創建占用100％寬度的內聯塊元素。 第二個元素還有一個懸停顯示的元素

Question

我有一個無序的圖像列表，每個圖像的底部都有一個文本覆蓋。 文本疊加層是具有不同背景顏色的嵌入式塊。

首先，我在不需要的背景顏色之間得到一個空格。 ✔️

其次，左邊的內聯塊具有固定的寬度，而右邊的內聯塊需要掩蓋剩余的寬度✔️

第三，第二個方塊應具有另一個元素，該元素應隱藏並在懸停時顯示

最后，當兩個塊中任何一個的高度發生變化時，我都希望它們始終保持均勻的高度

編輯段落div需要在懸停時顯示。 我也希望內聯塊的高度能夠出現，即使它們中的任何一個改變。

這就是我到目前為止

 .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% - 200px); float: left; padding-left: 5px; } .slideList .hide-description { display: none; font-weight:normal; } .slideList .hide-description p { font-weight:normal; padding-top: 10px 5px 10px; } .services-detail:hover + .hide-description { display: block; position: absolute; } .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 SERVICE:</p> <div class="services-detail"> <p>Some headline</p> <div class="hide-description"> <p>Some text that appears here. Text describes some service I intend to achieve. This may or may not take up to three lines maybe two </p> </div> </div> </div> </li> <ul> 

Answer 1

1和2）可以通過簡單地將.services-box和.service-highlight浮動到左側，然后將固定寬度設置為.service-box並將百分比寬度設置為.service-highlight來.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>