文本与div的左侧和右侧对齐，以便在div的左侧移动到单独的行？

Question

是否有一种方法可以使HTML和CSS使文本浮动到div的左侧和右侧，该文本也会溢出到新行上，当新行上的右对齐文本保持在左侧时？我正在谈论的是下面的灰色是div。

如果div进一步缩小，每个文本都应该自行包装，所以它看起来像这样：

  

左文字
  右
  文本

最终......

  

左
  文字
  右
  文本

如果触摸，所有文字都应在左侧;否则他们应该左右相同。

Answer 1

<强> DEMO

HTML

<div class="a">
<div class="c" style="float:left;">Left Text</div>
<div class="c" style="float:right;">Right Text</div>
<div style="clear:both;"></div>
</div>
<div class="b">
<div class="c" style="float:left;">Left Text</div>
<div class="c" style="float:right;">Right Text</div>
<div style="clear:both;"></div>
</div>

CSS

.a {
    width:200px;
    border:solid 1px #ccc;
}
.b {
    width:100px;
    border:solid 1px #ccc;
}
.c {
    width:100%;
    max-width:100px;
}

将.c的最大宽度设置为.a宽度的一半将有助于

但是这需要宽度的修正值。最好在这里使用javascript或jquery根据width值调整css

Answer 2

我不确定我明白你在说什么，但我想可能这就是你想要的：

<p class="left-text">This is some words</p>
<p class="right-text">This is some other words that wrap because there are too many in here. Holy crap this is a lot of words!!</p>

CSS：

.left-text {
  margin: 0 20px 0 0;
  float: left;
}

Fiddle

也许你想让左侧文字占据父级的一半，而不是只设置一个边距间隔？

display: inline-block;
width: 50%;
margin: 0;
float: left;

Fiddle#2

编辑：好的。你去吧。

.left-text {
  float: left;
  margin: 0;
}

.right-text {
  display: inline-block;
  float: right;
  margin: 0;
}

Fiddle3

Answer 3

说这是你div的代码：

<div>

Text on left

Text on right

</div>

你可以像这样给他们这些on标签：

<div>

<left>
Text on left
</left>

<right>
Text on right
</right>

</div>

最后，你可以添加css：

<style>
left {
float: left;
}
right {
float: right;
}
</style>

我知道我迟到了，但我希望这会有所帮助！