文本对齐div的左侧和右侧以移动到div左侧的单独行吗？

有没有一种方法使用HTML和CSS将文本浮动到div的左侧和右侧，该文本也会溢出到右侧对齐文本在新行上时保持向左的新行上？我在下面描述灰色是div的地方。文本对齐div的左侧和右侧以移动到div左侧的单独行吗？

如果DIV进一步皱缩，每个文本换行自身的，所以它看起来像这样：

左文本
右
文本

并最终...

左
文本
右
文本

所有文字应该是在左边，如果他们接触;否则它们应该在左边和右边的同一条线上。

来源

2014-01-30 Keavon

您可以使用媒体查询，如果这是宽度相关的问题。 –

我知道，但后来我不得不知道文本的确切总宽度，所以我想知道是否有更好的方法。 – Keavon

如果没有固定值，则不能这样做。你应该使用javascript或jquery来实现这一点，因为我们需要根据'width'值调整css。除非有人比较聪明才会在这里发表评论并证明我错了，请忽略此评论;） –

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值

来源

2014-01-30 03:21:41

不错的答案，但我会等到明天接受你的答案，看看是否有人知道如何没有JS找到宽度。 +1现在。 – Keavon

不能肯定我明白你说的话，调整的CSS，但我想也许这是你想要什么：

<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

来源

2014-01-30 03:34:35 relic

答案＃1：如果空间不足，需要将整个块放到下一行。答案2：这可能会派上用场，但仍然不是我要找的。 – Keavon

＃3将文本向右移动，而不是向左移动。 – Keavon

你必须澄清。它正在做你上面的图片看起来需要的东西。你的意思是，文本是正确的，你想让它剩下吗？您可以将文本左对齐添加到“右文本”以解决该问题。 – relic

文本对齐div的左侧和右侧以移动到div左侧的单独行吗？

回答

相关问题