代码之家 › 专栏 › 技术社区 › VorganHaze

块向右,文本向左对齐(无浮点,仅一个div)

css html

VorganHaze · 技术社区 · 7 年前

我想要一个容器块,其宽度与其较长的子容器块的宽度相同。块最右侧定位,其内容与左侧对齐(如图所示)。有没有一种方法可以在没有float属性且只使用一个div的情况下实现这一点?

enter image description here

3 回复 | 直到 7 年前

satyajit rout 7 年前

试试这个,看看这个 fiddle

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

ecg8 7 年前

我并不是百分之百地理解您的要求,但这里有一个在一个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>