Question

我创建了两个伸缩框。左侧的框显示图像。右侧的框显示文本，但必须将其显示在框的末尾。

.Details {
  background-color: yellow;
  display: inline;
}

p span {
  background-color: yellow;
}

.End {
  display: inline;
}

.End {
  display: flex;
}

.End.img {
  justify-content: left;
}

.End.p {
  justify-content: right;
}

<div class="End">
  <img src="http://www.intro-webdesign.com/images/newlogo.png">
  <div id="BLOCK">
    <p>This page was created by <span class="MyName">Madiha Gurchani</span> and Colleen Van Lent.To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro To Web Design</a>.</p>
  </div>
</div>

Answer 1

添加justify-content: space-between;

.Details {
  background-color: yellow;
  display: inline;
}

p span {
  background-color: yellow;
}

.End {
  display: flex;
  justify-content: space-between;
}

<div class="End">
  <img src="http://www.intro-webdesign.com/images/newlogo.png">
  <div id="BLOCK">
    <p>This page was created by <span class="MyName">Madiha Gurchani</span> and Colleen Van Lent.To learn more about web design, visit <a href="http://www.intro-webdesign.com

Answer 2

如果您要在“框的结尾”处使文本右对齐-

.Details {
  background-color: yellow;
  display: inline;
}

p span {
  background-color: yellow;
}

.End {
  display: inline;
}

.End {
  display: flex;
}

.End.img {
  justify-content: left;
}

.End.p {
  justify-content: right;
}

#BLOCK {
  text-align: right;
}

<div class="End">
  <img src="http://www.intro-webdesign.com/images/newlogo.png">
  <div id="BLOCK">
    <p>This page was created by <span class="MyName">Madiha Gurchani</span> and Colleen Van Lent.To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro To Web Design</a>.</p>
  </div>
</div>

如何将文本移到框尾？

2 个答案: