當用百分比添加寬度時，疊加效果不起作用

我想在連續3張圖像中製作簡單的照片庫，以及當我添加寬度時：33％;該寬度不適用於佈局類。任何人都可以建議，我怎樣才能使它正確顯示它？當用百分比添加寬度時，疊加效果不起作用

例子：https://jsfiddle.net/kani339/ed7g6hjp/

HTML：

<section> 
    <div class="photo-gallery"> 
    <div class="layout"> 
     <div class="img-block"> 
      <img src="download.jpg" alt=""> 
     </div> 
    </div> 
    </div> 
</section>

CSS：

.layout { 
    background: red; 
    opacity: 1; 
    height: 250px; 
    width: 33%; 
    float: left; 
} 

.img-block img { 
    height: 250px; 
    width: 33%; 
    float: left; 
} 

.img-block img:hover{ 
    opacity: 0.5; 
    cursor:pointer; 
}

來源

2016-12-31 Andrew

你33％的影響圖像不是佈局。

也許這樣的事情？

.layout { 
 
    background: red; 
 
    opacity: 1; 
 
    height: 250px; 
 
    width: 100%; 
 
    /* width: 350px; */ 
 
    float: left; 
 
} 
 
.img-block img { 
 
    height: 250px; 
 
    width: 33%; 
 
    float: left; 
 
} 
 
.img-block img:hover { 
 
    opacity: 0.5; 
 
    cursor: pointer; 
 
}

<section> 
 
    <div class="photo-gallery"> 
 
    <div class="layout"> 
 
     <div class="img-block"> 
 
     <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt=""> 
 
     <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt=""> 
 
     <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-12-31 19:27:46 Syden

當用百分比添加寬度時，疊加效果不起作用

回答

相關問題