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

看起来你的评论会导致跳过这些类。 //不是有效的评论语法。

如果您将它们从//comment更改为/* comment */，则这些类可以正常工作： https://www.w3schools.com/code/tryit.asp?filename=FIE6CZSCPO09

在ID为＃portofolio的div中，Div不会以100％宽度显示

1 个答案: