将内容放在内容的左侧

Question

CSS中是否有办法在某些内容的左侧放置文本（并将内容完全移到右侧？）以下是截图：

这是HTML：

<div class="label">TO</div>
asdf<br/>
asdfasdf<br/>
asdfasdfasdf<br/>

Answer 1

可以有一个解决方案，

<div class="label">TO</div>
<div class="text">
  <p>asdf</p>
  <p>asdfasdf</p>
  <p>asdfasdfasdf</p>
</div>

CSS将是

.label {
  float: left;
  width: 20%;
}

.text {
  float: right;
  width: 70%;
}

.label, .text {
  display: inline-block;
}

现在，这将是内联的。 ：）

Answer 2

我会在你想要贴在左边的元素上使用绝对定位，并在包含元素中添加填充以给它空间。

请参阅小提琴：http://jsfiddle.net/6KQ74/1/

p {
    padding-left: 3em;
    margin-left: 25px;
    position: relative;
    line-height: 3;
}
    p .label {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 3em;
    }