文字環繞絕對定位的div

我知道有幾個關於類似主題的問題，但它們大多是浮動div /圖像。我需要將圖像（和div）完全定位（向右），但我只是希望文本可以在其周圍流動。它工作，如果我浮動div，但然後我不能把它放在我想要的地方。因爲這些文字只是在圖片後面流動。文字環繞絕對定位的div

<div class="post"> 
      <div class="picture"> 
    <a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture" /></a></div> 
     <span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p> 
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p> 
     </div>

是HTML

與CSS存在的一個例子：

.picture img { 
     background: #fff; 
     border: 1px #ddd solid; 
     padding: 2px; 
     float: right; 
} 

.post .picture { 
    display: block; 
    height: auto; 
    position: absolute; 
    right: -10px; 
    top: -10px; 
    width: auto; 
} 

.post { 
    border: 1px solid #FFF; 
    border-bottom: 1px solid #e8ebec; 
    padding: 37px 22px 11px; 
    position: relative; 
    z-index: 4; 
}

這是一個Drupal主題所以沒有這個代碼是我的，這只是它不完全工作它的時候來到那裏拍一張照片。

來源

2009-12-16 Paul Murphy

你可以發佈標記和CSS？ –

絕對定位將元素從正常的文檔流中取出，因此它不會與其他元素交互。也許你應該修改如何使用float來定位它，如果你遇到困難，可以在Stack Overflow上詢問它:)

來源

2009-12-16 16:43:44 akamike

如果使用負邊距不適合我，感謝您可能不得不採取這種做法。 –

只是一個評論：我發現可怕的是，沒有辦法讓文本圍繞定位的對象流動，因爲在很多情況下，當包含div很多時，根據屏幕大小無法將對象放置在極端位置的對象，而不是通過使用position：absolute。在這種情況下，執行java查詢似乎是唯一的選擇...這是css3在我看來的不足... –

絕對定位不會讓您換行文字。你必須使用浮動和位置使用邊距或填充。

來源

2009-12-16 16:32:57 iamtooamazing

啊希望這不會是這種情況，因爲我認爲負邊際可能導致其他瀏覽器出現問題。感謝您的回覆。 –

當你絕對地定位一個div時，你會有效地將它從文檔流中取出來，所以其他元素就好像它不在那裏一樣。

要解決這個問題，你可以改用邊距：

.myDivparent 
{ 
    float: left; 
    background: #f00; 
} 

.myDivhascontent 
{ 
    margin-left: 10px; /*right, bottom, top, whichever you need*/ 
}

希望這將這樣的伎倆:)

來源

2011-01-20 14:52:43 Kyle

在我的情況，使用joomla它很難編輯幻燈片模塊謝謝凱爾:) – FDI

在我的opinon，「絕對」性狀不佳而得名，是因爲它的位置實際上是相對於第一父衛生組織的位置是不固定的

<div class="floated"> 
<div style="position: relative;"> 
    <div class="AbsoluteContent"> 
    stuff 
    </div> 
</div> 
</div>

來源

2011-01-20 14:53:53 Matt

謝謝馬特，但不工作 – FDI

如果你想要一個特定的代碼答案，你必須發佈一些你正在使用的代碼 – Matt

你的想法很清楚我改變了代碼描述並且沒有工作，你測試了嗎？請讓我知道如果你想看到我的代碼非常感謝馬特 – FDI

正如@Kyle塞文歐克斯提到，你正在服用的絕對定位的內容出來的文件流。

據我所見，父母div包裹絕對定位內容的唯一方法是使用javascript設置每次更改的寬度和高度。

來源

2011-01-20 15:00:54 jeroen

謝謝jeroen，我怎麼能找到元素的高度沒有風格的高度呢？ – FDI

@FDI我對我的幻燈片使用jQuery，它會像'var height = $（「slide_show_element」）。height（）;'。得到你內部元素的計算高度，你可以將它應用到外部/浮動元素：'$（「floated_element」）。身高（高度）;' – jeroen

它的工作，謝謝:) – FDI

我知道這是一個較老的問題，但我碰到它想要做我認爲你正在嘗試的東西。我已經使用：CSS選擇器之前做了一個解決方案，所以ie6-7不是很好，但其他地方你應該很好。

基本上，把我的圖像放在一個div中，然後我可以在手邊添加一個很長的事物float block，並且文字在它周圍快樂地包裹着！

img { 
    float:right; 
    clear:both; 
    width: 50% ; 
    margin: 30px -50px 10px 10px ; 
} 
.rightimage:before { 
    content: '' ; 
    display:block; 
    float: right; 
    height: 200px; 

}

你可以看看這裏：

http://codepen.io/atomworks/pen/algcz

來源

2012-08-23 12:22:23 Leonard

我剛剛在最新版本的Chrome，FF，Safari中快速測試過它，它的工作原理與預期完全一樣！我知道它必須是這樣的一個div解決方案，但是迄今爲止所有的猜測工作都已經完成。順便說一下，試圖將兩個正確的錨定圖像產生意想不到的結果... – Cyprus106

這是最好的答案。我花了幾個小時尋找這個，直到我獨立解決它。我希望我先找到了這個答案。 –

偉大的CSS解決方案！ –

我認爲最好的辦法是在浮動內容後添加一個額外的div，但仍是家長清除以前的風格中。

<div class="clear"></div>

和CSS：

.clear 
{clear:both;}

來源

2013-07-15 19:13:58

下面是可能對一些工作一招：

，如果你有擠滿了很多對象的容器，你想使定位對象出現在某些情況下爲高，在其他情況下爲低（例如各種屏幕尺寸），然後在您的html中多次散佈對象的副本，即或float，然後display:none根據您所需的條件，您不想看到的物品。

這裏是一個的jsfiddle顯示正是我的意思：JSFiddle of right positioning high and low

注：我添加顏色只爲效果。除了課程名稱外，subject-1和subject-2 div都是相互精確的副本。

來源

2015-11-25 06:13:49

這個問題很容易解決。它使用了白色空間：nowrap;

<div class="position:relative"> 
<div style="position: absolute;top: 100%; left:0;"> 
    <div style="white-space:nowrap; width: 100%;"> 
    stuff 
    </div> 
</div> 
</div>

例如我是在下拉菜單中的導航，所以我使用設置是

<ul class="submenu" style="position:absolute; z-index:99;"> 
    <li style="width:100%; display:block;"> 
     <a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a> 
    </li> 
<ul>

圖片實例

Without Nowrap enabled

With Nowrap enabled

此外，如果你仍然無法弄清楚檢查ou t你可以谷歌引導模板上的下拉菜單。然後找出它們是如何工作的，因爲它們使用絕對位置並使文本佔用100％的寬度而不包裝文本。

來源

2017-05-02 09:49:49