如何将文本右对齐到列中？

Question

我试图将页面上的一个段落推到最右边，就像它在这张图片中一样：

我想要一个大的左对齐标题，页面上有一个小的右对齐段落。到目前为止，我无法让CSS看起来像这样，但我猜它并不太难。关于如何做到这一点的任何想法？

CSS：

.rectangle-container .title {
color: $white;
margin: 0 .5em;
padding: 1em 0 0 3em;
font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0 2px 1px rgba(0, 0, 0, .5);
}

.rectangle-container p {
    color: $white;
    text-align: right;
}

.rectangle-container .title是我的标题并且自然左对齐，但.rectangle-container p看起来似乎是右对齐的，但它根本不会叠加文本并最终跨越整个页面

Answer 1

您可以在文本<p>块上使用左侧边距执行此操作。

因此，您要将文本设置为对齐，并将整个块与左侧大间隙对齐，并将文本宽度与容器对齐。

.rectangle-container p {
color: $white;
text-align:justified;
width:70%;
margin-left:30%;
padding:0;
}

我认为使用padding不会起作用，默认填充包含在width属性中，而margin超出宽度。如果上面的示例是替代填充的边距，则填充将是30％宽度的百分比，这显然是不正确的。

备注：

• 此解决方案与容器的Width + margin + padding + border = 100%一样长。因此，如果您在线下添加填充或边框，则应相应地调整其他值。浏览器将接受这些值，但如果这些元素的总和超过容器盒的100％宽度，偶尔的浏览器行为可能会有点意外。
• 作为一般指南，请尝试避免百分比宽度的奇数值。
• 您可以使用CSS3 calc();值来获取p元素内容width CSS的动态值。