イメージとテキストをCSSのみで整列する

Question

コンテンツの整列にはいくつかの助けが必要です。女性のイメージは左揃えと右揃えにする必要があります。

これはCSS Zen Gardenです。つまり、は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; 
}