文本對齊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左側的單獨行嗎？

回答

相關問題