내가 만들려고 해요 이미지와 사이드 바

Question

레이아웃 스타일을하는 방법 : Layout

내가 가진 무엇

현재 바이올린 : full page

는 페이지가 응답 볼 수 있듯이 그 가정하자 방식으로 작동 지금은.

이미지에서 그려지는 방식으로이 페이지의 스타일을 지정하는 방법에 대한 약간의 통찰력이 필요합니다.

현재 이미지 컨테이너 css (기본적으로 6 이미지 또는 3 이미지로 반복됩니다 .3 이미지 디스플레이의 경우 한 이미지는 컨테이너의 50 %를 차지하고 나머지 두 이미지는 각각 25 %를 차지합니다.) 네비게이터

.nav-container { 
/* flex-basis: 30%; */ 
padding-top: 500px; 

} 


.navigation { 
    width: 150px; 
    } 


.mainmenu, .submenu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 


.mainmenu a { 
    display: block; 
    background-color: #fff; 
    text-decoration: none; 
    padding: 10px; 
    color: #000; 
} 


.mainmenu a:hover { 
    background-color: #rainbow; 
} 




.mainmenu li:hover .submenu { 
    display: block; 
    max-height: 200px; 
} 


.submenu a { 
    background-color: #fff; 
} 


.submenu a:hover { 
    background-color: #fff; 
} 


.submenu { 
    overflow: hidden; 
    max-height: 0; 
    -webkit-transition: all 0.5s ease-out; 
} 

모든 도움으로

.aestheticsDisplay { 
margin: 0 auto; 
} 

.imageGrid { 
margin: 20px 0 0 0; 
padding: 0; 
list-style: ; 
display: inline; 
text-align: center; 
float:none; 
} 

.imageGrid:after { 
    clear: both; 
} 

.imageGrid:after, .aestheticsBox:before { 
    display: table; 
} 

.imageGrid li { 
    width: 400px; 
    height: 400px; 
    display: inline-grid; 
    margin: 20px; 
    float: none; 

} 

.aestheticsBox { 
    width: 100%; 
    height: 100%; 
    position: inherit; 
    cursor: pointer; 
border-radius: 10px; 
-webkit-transition: 0.3s ease-in-out, 
-webkit-transform 0.3s ease-in-out; 
-moz-transition: 0.3s ease-in-out, 
-moz-transform 0.3s ease-in-out; 
transition: all 0.3s ease-in-out, 
transform 0.3s ease-in-out; 
} 

.aestheticsBox:hover { 
transform: scale(1.05); 
} 

.displayImg-1 { 
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), 
url("../imgs/nick_1.jpg"); 
} 

.displayImg-2 { 
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), 
url("../imgs/nick_1.jpg"); 
} 

.displayImg-3 { 
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), 
url("../imgs/nick_1.jpg"); 
} 

.displayImg-4 { 
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), 
url("../imgs/nick_1.jpg"); 
} 

.displayImg-5 { 
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), 
url("../imgs/nick_1.jpg"); 
} 
.displayImg-6 { 
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), 
url("../imgs/nick_1.jpg"); 
} 

아주 많이 감사합니다.

Answer 1

자동 여백을 사용하면 문제가 해결되지 않을 것입니다.