向右阻止，文本左对齐（没有浮点数，只有一个div）

Question

我想要一个容器块，其宽度与其较长的子容器的宽度相同。该块大部分位于右侧，其内容与左侧对齐（如图中所示）。有没有办法实现这个没有浮动属性，只使用一个div？

Answer 1

试试这个并检查这个fiddle

.box {
      width: 40%;
      margin-left: auto;
    }

Answer 2

我不是百分之百满足你的要求，但这里是一个使用一个div内的p元素的JSFiddle。 https://jsfiddle.net/3ct2syhp/

CSS

.box {
  display: inline-block;
  margin-left: 50%;
}

HTML

<div>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p class="box">
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
</div>

Answer 3

优雅的方式：

div {display: table; margin-left: auto; text-align: left;}