将文本对齐到div的左边和右边，以移动到div左侧的分隔行？

Question

是否有一种使用HTML和CSS的方法可以使文本漂浮在div的左侧和右侧，同时也会溢出到新行上，当右对齐的文本出现在新行时，它就会停留在左边？下面描述的是灰色是div的地方。

​

​

如果div进一步缩小，则每个文本应该单独包装，因此如下所示：

左文本 正确的 文本

最终..。

左边 文本 正确的 文本

所有文本如果接触到，都应该位于左侧；否则，它们应该位于同一行左右。

Answer 1

演示

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;
}

小提琴

也许你想让左边的文本占据一半的父母，而不是仅仅设置一个空白间隔？

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>

你可以这样给它们贴标签：

<div>

<left>
Text on left
</left>

<right>
Text on right
</right>

</div>

最后，您可以添加css：

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

我知道我去派对迟到了，但我希望这能帮上忙！