时间戳

首页 > 解决方案 > 如何将文本移动到框的末尾？

html - 如何将文本移动到框的末尾？

问题描述

我创建了两个弹性盒子。左侧的框显示图像。右侧的框显示文本，但它必须显示在框的末尾。

.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">nameh dhreh</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>

标签： htmlcssflexbox

解决方案

如果您的意思是在“框的末尾”右对齐文本 - 

.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>

推荐阅读