html - 在 id #portofolio 的 div 中，div 不会以 100% 宽度显示

Question

所有其他 div 设置都有效，但是当使用类 .l100 和 .p100 时，图像不显示。

我尝试在其他样式之后重新排列 .l100 和 .p100 的样式，但这会使 .l75 和 .p75 消失...

有人能帮忙吗，这是代码:

* {
    	margin: 0px;
    	padding: 0px;
    }
    
    #portofolio {
    	width: 80%;
    	margin: auto;
    }
    
    .image {
    	background-size: cover; 
    	background-repeat: no-repeat;
    	background-position:center;
    	
    	position: relative;
    	
    	margin-bottom: 1%;
    	margin-right: 1%;
    	box-sizing: border-box;
    	
    	/*-webkit-box-shadow: 10px 10px 58px -20px rgba(0,0,0,0.75);
    	-moz-box-shadow: 10px 10px 58px -20px rgba(0,0,0,0.75);
    	box-shadow: 10px 10px 58px -20px rgba(0,0,0,0.75);*/
    	
    	float: left;
    
    }
    
    //portrait 
    
    .p100 {
    	width: 99%;
    	padding-bottom:  177.77%;	
    	margin-right: 0%;
    
    }
    .p75 {
    	width: 74%;
    	padding-bottom:  133.33%;	
    
    }
    
    .p50 {
    	width: 49%;
    	padding-bottom:  88.88%;	
    
    }
    .p25 {
    	width: 24%;
    	padding-bottom:  42.1%;	
    
    }
    
    
    //landscape 
    
    .image.l100 {
    	width: 99%;
    	padding-bottom:  56.25%; 
    
    		
    }
    
    .l75 {
    	width: 74%;
    	padding-bottom:  42.1875%; 
    }
    
    .l50 {
    	width: 49%;
    	padding-bottom:  28.125%; 
    }
    
    .l25 {
    	width: 24%;
    	padding-bottom:  14.0625%; 
    }

<div id="wrapper">
    <div id="header"></div>
    
    
    <div id="portofolio">
    
    <!--<div style="width: 100%; height: 400px; overflow-y: hidden; overflow-x:visible;margin-bottom: 2vh;">-->
    <div class="image p25" style="background-image: url(https://image.ibb.co/jJ4rNF/g7_XLRx_E2_crop.jpg);"></div><!--https://image.ibb.co/cdpKba/g7XLRxE.jpg-->
    <div class="image l75" style="background-image: url(https://image.ibb.co/dVGMpv/329_Flower.jpg);"></div><!--</div>-->
    
    <div class="image l50" style="background-image: url(https://image.ibb.co/dgwkhF/20170501_135937_DARKER_CROPPED.jpg);"></div>
    <div class="image l50" style="background-image: url(https://image.ibb.co/h1WPba/ezgif_com_crop_PROBABLY_THE_BEST.gif);"></div>

    
    <div class="image l100" style="background-image: url(https://image.ibb.co/fJL4ba/20170604_222345.jpg);"></div>
    
    </div>  
    </div>

Answer 1

看来是您的评论导致这些类(class)被跳过。 // 不是有效的注释语法。

如果将它们从 //comment 更改为 /* comment */，这些类将起作用: https://www.w3schools.com/code/tryit.asp?filename=FIE6CZSCPO09