仅使用CSS将图像和文本对齐

Question

我需要一些帮助来调整内容，我的女性形象需要与左边对齐，文字需要与右边对齐。

这是一个CSS Zen Garden，这意味着我只能使用CSS并且无法编辑HTML。有没有办法做到这一点，而不使用这么多的边距或填充？如果我可以改变HTML，我会漂浮它，但在这里它是不可能的......

我用背景位置定位图像：%%;

在此处查看Alpha website

＆＃13;

＆＃13;

/*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*/

＆＃13;

＆＃13;

＆＃13;

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;
}