1. 首頁
  2. 問答
  3. css float問題

css float問題

2009-12-01 119 views
1

我有大約8段我想向左浮動，但有些段落比其他段落有更多的文本。css float問題

所以當我在瀏覽器中查看時，我從左到右浮動，我想要，但是當一些段落更長，一些更短時，我會在一列中得到多個短段落。

我想要的是爲每個新的段落在一個新的列。

我可以用CSS來做這件事嗎，還是我需要使用表格結構？

對不起，我會直觀地顯示這個，但內聯html不能按預期工作。

來源

2009-12-01 vwfreak

+0

這將有助於如果你能張貼一些代碼，甚至更好地鏈接到你得到的東西，也許是你想要的Photoshop模型。 – 2009-12-01 18:06:59

+0

你的問題有點混亂。你說你想讓每個段落在它自己的列中，這表明你想要8列。但是你給出的表格的例子有3列，每列不是段落。如果你能澄清一點，你可能會從比我聰明的人那裏得到很多好的答案。 :) – Cfreak 2009-12-01 18:12:23

+0

如果您將html文件上傳到服務器，然後給我們一個鏈接，這可能會有所幫助。 – 2009-12-01 18:17:42

回答

1

我有麻煩想象你的佈局是什麼樣子，但你嘗試過

clear: left

和

clear: right

？

它們導致元素捕捉到下一個「未打開」位置。不知道這是否解決你的情況。

來源

2009-12-01 18:07:28

0

爲每個段落設置一個固定的寬度？

來源

2009-12-01 18:12:59

2

如果你想列，您可以爲控制浮動類的寬度，否則它是一個塊，佔用100％，其容器的寬度：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>de titel</title> 
     <style type="text/css"> 
       .left 
       { 
       float:left; 
       width:100px; 
       } 
       body 
          { 
          width:2300px; 
          } 
     </style> 
    </head> 
    <body> 
     <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. </p> 
     <p class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. 
     </p> 
     <p class="left"> 
     Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. 
     </p> 
     <p class="left"> 
     Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. 
     </p> 
     <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. </p> 
     <p class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis dui sed magna faucibus consectetur. Sed erat mauris, accumsan sit amet faucibus in, facilisis ut metus. Integer at eros non mi porttitor mattis nec quis sem. Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. 
     </p> 
     <p class="left"> 
     Donec ante mauris, elementum quis tincidunt gravida, interdum non libero. Sed mollis pretium orci, eget tempus mi elementum semper. In hac habitasse platea dictumst. Aenean lectus nibh, convallis ac fringilla eu, molestie a turpis. 
     </p> 
     <p class="left"> 
     Aliquam consequat sem vel sapien dictum vulputate. Curabitur justo sapien, lacinia sed porttitor sit amet, sollicitudin eu elit. Nulla facilisi. Nulla lectus felis, sollicitudin eget commodo vel, vestibulum vel metus. Aliquam sagittis leo eget orci venenatis viverra. Nulla arcu est, interdum non semper sit amet, vulputate vitae neque. Etiam sit amet augue quis nibh tristique vehicula. Suspendisse sem magna, sagittis quis pretium nec, faucibus id leo. Quisque vel lacinia purus. 
     </p> 
    </body> 
</html>

來源

2009-12-01 18:49:39 tahdhaze09

+0

我給身體添加了一個寬度，這樣就可以讓段落像列一樣穿過。 – tahdhaze09 2009-12-01 19:13:26

相關問題

 相關問題