如何讓文字不會纏繞在左側浮動的元素下？

我有兩個塊元素。第一個漂浮在左邊。我希望正確的元素也是塊，並保持其正方形。相反，它內部的文本包裝在向左浮動的元素下。如何讓文字不會纏繞在左側浮動的元素下？

CSS：

.comment-date { 
    float: left;  
}

HTML：日期下

<div class="comment-date">07/08 23:08</div> 
<div class="comment-body"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna 
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation. 
</div>

的Lorem存有文本換行。我希望它能保持一個塊狀，漂浮在日期的右邊。我怎樣才能做到這一點？

這裏是一個小提琴： http://jsfiddle.net/CS2Hs/

來源

2012-08-16 Ben174

其他解決方案的另一種這裏是簡單地增加一個margin-left到.comment-body 。這也將是有幫助的一組寬度適用於.comment-date

.comment-date { 
    float: left;  
    font-weight: bold;  
    width: 90px; 
} 
.comment-body { 
    margin-left: 90px; 
}

這將確保在.comment-body文本不出現日期下方。

這裏是一個演示：

--- jsFiddle DEMO ---

來源

2012-08-16 01:52:25 jackwanders

這是一個有趣的解決方案，但不幸的是我需要爲日期字段設置確切的寬度。我希望字段的寬度只會增加到日期文本的大小。有用的答案，但不是理想的解決方案:) – Ben174 2012-08-16 01:58:11

在這種情況下，下面的解決方案之一是浮動這兩個元素或使用'inline-block'是您理想的解決方案。我認爲最好不要重複已經提供的答案。 – jackwanders 2012-08-16 02:00:56

不幸的是，所有這些回覆都要求我設置一個寬度。而且它們需要身體元素上的寬度，在那裏你只需要在日期上使用寬度。所以我現在最喜歡這個解決方案。 – Ben174 2012-08-16 02:04:54

體塊不處於浮模型。簡單地設置float: left爲.comment-body。另外，你可以使用一些寬度。請參閱：http://jsfiddle.net/CS2Hs/3/

來源

2012-08-16 01:44:35 ACJ

我寧願不必使用寬度。但是我沒有辦法在沒有他們的情況下做到這一點。我希望body元素填充頁面的其餘部分，但是如果我使用的寬度不起作用。如果我使用百分比，我必須知道日期元素的延伸範圍。 – Ben174 2012-08-16 01:55:31

你可以考慮將它們相對於父容器放置，如下所示：http://jsfiddle.net/CS2Hs/8/。這樣評論主體寬度仍然是可變的。 – ACJ 2012-08-16 02:06:22

仍然要求我將它定位到左側110像素。如果日期增長到200像素會怎麼樣？ – Ben174 2012-08-16 02:08:16

我會盡力瞭解您的問題。據我所知，你希望.comment-body在右邊，而.comment-date在左邊，但在同一條線上。

如果我是正確的，也許這將工作：

.comment-date { 
    display: inline-block; 
    float: left; 
    width: 15%; 
    font-weight: bold; 
} 
.comment-body { 
    display: inline-block; 
    float: right; 
    width: 85%; 
}

我做了一個JSFiddle只爲你;）

來源

2012-08-16 01:45:46

謝謝，但我正在尋找一種不需要我設置寬度的解決方案。我不知道這些元素的寬度。我希望左邊的文字適合文本，右邊的文本則填充頁面的其餘部分。 – Ben174 2012-08-16 02:06:03

的jsfiddle似乎已關閉的那一刻很抱歉，如果這不起作用/是不是你想要的，但你嘗試過加入「溢出：隱藏「到」評論機構「？這將創建一個新的佈局上下文，以阻止文本在下面進行包裝。我覺得這非常有用！希望有所幫助！

來源

2013-11-12 09:56:22 user1010892

如何讓文字不會纏繞在左側浮動的元素下？

回答

相關問題