은 섹션 내부 문서에 특정 마진을 추가 내가 <code>1.2em</code> 공간 이미지 사이 섹션의 모든 폭을 가지고해야 함 6 개 기사와 섹션 만들기 위해 노력하고

Question

:

에서을 내가 추가 한 그림은 두 개의 이미지를 보여주고 있습니다. 첫 번째는 현재 상황이고 두 번째는 내가 원하는 것입니다. 현재 사용중인 CSS 코드입니다.

section { 
margin: 0 10%; 
display: flex; 
flex-wrap: wrap; 
background: pink; 
margin-bottom: 50em;} 

section article { 
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3); 
width: 33.3%;} 

section article img { 
width: 100%; 
height: 100%;} 

여기 누군가 내 문제를 해결할 수 있기를 바랍니다.

감사

Answer 1

이

section { 
 
    margin: 0 10%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background: pink; 
 
    margin-bottom: 50em; 
 
} 
 

 
section article { 
 
    box-shadow: 0em 0.2em 0.2em rgba(0, 0, 0, 0.3); 
 
    width: calc(33.3% - 1.2em); 
 
    margin: 0.6em; 
 
    position: relative; 
 
    float: left; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 
section article img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<section> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
    <article><img src="http://placehold.it/50x50" /></article> 
 
</section>

Answer 2

이 테스트하십시오보십시오 :

section article { 
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3); 
width: 30%; 
box-sizing:border-box; 
margin: 3%; 
} 

Answer 3

section { 
 
margin: 0; 
 
display: flex; 
 
flex-wrap: wrap; 
 
background: pink; 
 
margin-bottom: 50em; 
 
justify-content: space-between; 
 
} 
 

 
section article { 
 
box-shadow: 0em 0.2em 0.2em rgba(0,0,0, 0.3); 
 
width: 32%; 
 
    margin: 0 0 2%; 
 
} 
 

 
section article img { 
 
width: 100%; 
 
height: 100%;}

<section> 
 
    
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    <article><img src="http://lorempixel.com/900/300/nightlife/"></article> 
 
    
 
</section>