이미지와 텍스트를 CSS로만 정렬하십시오

Question

콘텐츠 정렬에 도움이 필요합니다. 여성의 이미지가 왼쪽과 오른쪽 텍스트에 정렬되어야합니다.

이것은 CSS 젠 가든입니다. 나는 CSS 만 사용할 수 있으며 HTML을 편집 할 수 없습니다. 너무 많은 여백이나 패딩을 사용하지 않고도이를 수행 할 수있는 방법이 있습니까? HTML을 바꿀 수 있다면 플로팅 할 수 있지만 여기서는 가능하지 않습니다.

배경 위치로 이미지의 위치를 ​​지정합니다. % %; 여기

보기 Alpha website

/*eerste section*/ 
 

 
.preamble h3 { 
 
    font-family: fraktur; 
 
    font-size: 15em; 
 
    color: #4A4A4A; 
 
    margin: 5%; 
 
} 
 

 
.preamble { 
 
    /* width: 80%; */ 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    margin: 50px auto; 
 
    /* border: 2px solid #000000; */ 
 
    background-image: url('../images/foto1.png'); 
 
    background-repeat: no-repeat; 
 
    /*background-size: contain;*/ 
 
    background-size: 40%; 
 
    background-position: 93% 82%; 
 
} 
 

 
.preamble p { 
 
    width: 47%; 
 
    margin: 15px 40px; 
 
} 
 

 

 
/*einde eerste section*/ 
 

 

 
/*tweede section*/ 
 

 
.explanation h3 { 
 
    font-family: baskerville; 
 
    font-weight: 100; 
 
    font-size: 10em; 
 
    width: 45%; 
 
    color: #4A4A4A; 
 
    margin: 5%; 
 
} 
 

 
.explanation { 
 
    /* width: 80%; */ 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    margin: 50px auto; 
 
    /* border: 2px solid #000000; */ 
 
    background-image: url('../images/dame.png'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: 93% 82%; 
 
} 
 

 
.explanation p { 
 
    width: 47%; 
 
    margin: 15px 40px; 
 
} 
 

 

 
/*einde tweede section*/

Answer 1

다음과 같이 사용할 수 있습니다. justify-items : end; 콘텐츠를 끝으로 이동시키는 격자 레이아웃 그런 다음 왼쪽 :

/*eerste section*/ 
 
.preamble h3 { 
 
    font-family: fraktur; 
 
    font-size: 15em; 
 
    color: #4A4A4A; 
 
    margin: 5%; 
 
} 
 

 

 
.preamble { 
 
    /* width: 80%; */ 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    margin: 50px auto; 
 
    /* border: 2px solid #000000; */ 
 
    background-image: url('../images/foto1.png'); 
 
    background-repeat: no-repeat; 
 
    /*background-size: contain;*/ 
 
    background-size: 40%; 
 
    background-position: 93% 82%; 
 
} 
 

 
.preamble p { 
 
    width: 47%; 
 
    margin: 15px 40px; 
 
} 
 

 
/*einde eerste section*/ 
 

 

 
/*tweede section*/ 
 
.explanation h3 { 
 
    font-family: baskerville; 
 
    font-weight: 100; 
 
    font-size: 10em; 
 
    width: 45%; 
 
    color: #4A4A4A; 
 
    margin: 5%; 
 
} 
 

 

 
.explanation { 
 
    /* width: 80%; */ 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    margin: 50px auto; 
 
    /* border: 2px solid #000000; */ 
 
    background-image: url('../images/dame.png'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: 13% 82%; 
 
    justify-items: end; 
 
} 
 

 
.explanation p { 
 
    width: 47%; 
 
    margin: 15px 40px; 
 
} 
 

 
/*einde tweede section*/

Answer 2

설정 direction: rtl; 및 background-position: left center;

.explanation { 
    display: grid; 
    grid-template-columns: 1fr; 
    margin: 50px auto; 
    background-image: url(../images/dame.png); 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: left center; 
    direction: rtl; 
}