使浮動：左div粘

我正在尋找一個簡單的解決方案，一個簡單的問題，我相信它已被應用在某處，但無法找到解決方案。使浮動：左div粘

因此，現在我有一個很長的介紹頁面，比如維基百科，以及像維基百科這樣的導航鏈接列表。在維基百科中，他們在每個段落的末尾都有回到頂端的鏈接，但我不想那樣做。相反，我試圖在滾動時讓表格變得粘滯。

當前的代碼是這樣的：

<div id="introtable"> 
    <table class="normalfont"> 
     <tr> 
      <td style="border: 1px solid #000000;"> 
       <p align="center" style="margin-top:13px;">Contents</p> 
       <ul> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
       </ul> 
      </td> 
      <td style="width:25px;"></td> 
     </tr> 
    </table> 
</div> 

<p align="justify" id="something" style="margin-top:5px;"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p> 

<p align="justify" id="something" style="margin-top:5px;"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p>

而CSS是這樣的：

#introtable{ 
    width:255px; 
    margin-top:10px; 
    margin-bottom:10px; 
    float:left; 
} 

.normalfont{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
}

現在，該段文字環繞表，離開餐桌之間的一些空白和文本。

我希望表格在頁面上仍然向左浮動，即仍然有段落環繞它。

我試着添加position：fixed，但是它覆蓋了float：left，使段落出現在表下。

是否可以通過純CSS？如果不是，JavaScript也是可以接受的。

請幫忙。提前致謝。

來源

2017-01-21 Wang Tianjian

我想你應該扔在一起的活生生的例子，因爲我真的不明白是什麼問題 –

如果你想段落環繞菜單，但菜單位置的變化，你想當您滾動時，頁面上的文字可以變形並環繞菜單？這將是一個奇怪的經歷。如果沒有，你可以在菜單上使用'position：fixed'並給菜單一個寬度，並且無論菜單的寬度如何，段落的'margin-left'都是這樣（所以段落不會落在菜單） –

我不知道這能用純CSS完成，但遺憾的是我不是CSS專家。但是使用JS（在這個例子中使用JQuery），你可以在滾動時改變表格margin-top。上面的包裝文本仍然會被包裝，但這不會被看到，文本也不需要四處移動。

由於設置上滾動的CSS可以給人一種生澀的效果（尤其是如果處理異步），我已經適應了邊距的設置動畫短片有表緩解到位：

$(window).scroll(function(e){ 
    $('#introtable').stop().animate({'margin-top': 10 + $(this).scrollTop()}, 10); 
});

例fiddle

來源

2017-01-21 21:50:47

這是我試圖實現的外觀，而且很簡單。謝謝！ –

只需將要保留在瀏覽器上相同位置的容器的position設置爲fixed（position: fixed）即可。然後你可以準確地定位它，通過說：bottom: 30px; right: 0等

來源

2017-01-21 21:06:48 GjoreDz

正如我所提到的，當我嘗試position：fixed時，段落出現在導航表下，這不是我想要的。我想堅持桌子的位置，同時保持文字環繞它。 –

@王天健好吧。也許你可以試試這個：在浮動時將容器寬度設置爲15％，並將內容寬度設置爲70％。我曾經遇到過同樣的問題，並且爲我解決了這個問題。 – GjoreDz

如果你希望有一個側欄，堅持屏幕，並允許你滾動頁面，我認爲你需要重新評估HTML的佈局。

在您當前的佈局中，您要求副本在側欄部分周圍浮動，而不管它在哪裏。你的代碼對它們進行不同的處理會更健康。

我的建議是你使用一個框架，如：bootstrap，foundation，materialize。

或者

使用Flexbox的- example - http://www.w3schools.com/html/html_layout.asp

而且，它不只是有p標籤左右浮動所有的威利願意不願意的最佳實踐。

如果你只是想你的盒子粘在角落

class { 
    position:absolute; 
    bottom:20px; 
    left:20px; 
}

來源

2017-01-21 21:19:03

這是一個不好的答案，代碼被錯誤地寫入以達到期望的結果 –

對不起，以後我會更加清楚，謝謝你的幫助。 –

謝謝你... 你有沒有得到你要的東西？ –

你應該給你的段落一些margin-left避免重複：

#introtable{ 
position:fixed; 
width:255px; 
margin-top:10px; 
margin-bottom:10px; 
float:left; 
} 
p{ 
margin-left:15%; 
}

來源

2017-01-21 21:38:02 Hani

使浮動：左div粘

回答

相關問題